Question

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

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

CSS文件：

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

HTML文件：

<html>
<head>

<script>
    // ???
</script>

</head>

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

编辑：只要指定，就可以使用任何内容，例如 jQuery 来完成工作！我只需要做这个工作！

Answer 1

我已经做过几次了。 Here is a good tutorial.

您可以使用针对href属性的JS来加载新的样式表。

<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>

Answer 2

我想你需要这个：

点击以下示例中的按钮

$(".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>

Answer 3

你可以试试这个：

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

Answer 4

可以相对容易地完成。首先，您需要在单击按钮时捕获，然后您需要添加将在单击按钮时添加到网站的样式。对于不同的按钮，您甚至可以定义不同的样式表（例如主题更换器）。这样做的代码是：

$('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">');
});

因此，当点击具有夏季课程的按钮时，会在页面的头部添加另一个styleshet summer.css。

当点击具有冬季课程的按钮时，将添加另一个样式表，winter.css到您页面的头部。

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

所以他们不会替换你主题的一般样式表......他们会根据你的需要通过成本计算和为你的页面元素创建额外的规则来扩展它。

希望它有所帮助。

如何创建导入.css文件的按钮？

4 个答案: