如何制作一个导入.css文件的按钮?

How can I make a button that imports a .css file?

本文关键字：文件 css 按钮 导入 一个 何制作      更新时间：2023-09-26

我想创建一个按钮来导入。css文件中的样式。

有什么办法吗?如果没有，我的目标是用按钮改变多个css属性，基本上是为网站创建主题。

CSS文件:

.body {
    background-image: url("example.png");
}
HTML文件:

<html>
<head>
<script>
    // ???
</script>
</head>
<body>
    <button onclick="???">Import!</button>
</body>
</html>

EDIT:任何东西，比如jQuery，只要指定，都可以用来完成工作!我只需要让这个工作!

我已经这样做过几次了。这是一个很好的教程。

你可以使用JS瞄准你的href属性来加载一个新的样式表。

<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>



<button onclick="swapStyleSheet('new.css')">New Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>

我想你需要这个:

点击下面示例中的按钮

$(".btn-success").click(function()
{
	$('head').append('<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
 <button type="button" class="btn btn-success">Click Me</button>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

你可以试试:

$('#grayscale').click(function (){
   $('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
   $('link[href="style2.css"]').attr('href','style1.css');
});

这很容易做到。首先，你需要捕捉按钮被点击的时间，然后你需要添加按钮被点击时将被添加到网站的样式。对于不同的按钮，您甚至可以定义不同的样式表(例如，类似主题更改器的样式表)。这样做的代码是:

$('button.summer').click(function() {
    $('head').append('<link rel="stylesheet" href="assets/css/summer.css">');
});
$('button.summer').click(function() {
    $('head').append('<link rel="stylesheet" href="assets/css/winter.css">');
});

所以当按钮与类summer被点击时，另一个样式表summer.css将被添加到页面的标题部分。

当按钮与类winter将被点击，另一个样式表将被添加，winter.css到您的页面的标题部分。

这种工作方法，首先要求你的网站的夏季和冬季服装主题的所有相同的规则将被放入另一个通用的主样式表中，例如general.css或style.css，并应用summer.css和/或winter.css作为一般主题的服装。

所以它们不会取代你主题的一般样式表…他们通过根据你的需要为你的页面元素定制和创建额外的规则来扩展它。

希望能有所帮助。

相关文章：