Question

我有一个网站，万圣节我正在考虑添加一个按钮，将网站改为万圣节主题。这将是一个隐藏的按钮，因此我更喜欢它不经常在CSS代码中。我一直在尝试做的是当你通过Javascript函数点击按钮时出现CSS代码。不幸的是，CSS是CSS，无论你是否隐藏它都会呈现它的代码。总之，我正在寻找一种通过函数或任何其他方法通过CSS更改页面布局的方法。

Answer 1

创建一个名为halloween.css的单独样式表，并将其链接到页面
使用.halloween开始所有css规则，例如.halloween h1 {background:black;color:orange}
按一个按钮切换一个body类，例如：jquery：

$（＆＃39;＃按钮＆＃39）。单击（函数（）{ $（＆＃39;主体＆＃39）。toggleClass（＆＃39;万圣节＆＃39）; }）;

Answer 2

有两种方法可以用来实现你想要做的事情。您可以使用jQuery click函数，并在有人点击按钮时触发jQuery css函数。

＆＃13;

$( "#click" ).click(function() {
  $("body").css("background","black");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">Click Me</button>

＆＃13;

否则，您可以使用jQuery click函数向class标记添加body，然后在样式表中添加与新body类相关的CSS 。例如，您可以使用jQuery将class="halloween"添加到body标记，然后为主页上的不同元素添加单独的样式，例如.halloween h1 { //styles here } .halloween p { //styles here }。

＆＃13;

$(document).ready(function () {
    $("#target").click(function () {
        $('body').addClass('halloween');
    });
});

＆＃13;

.halloween {
    background:red
}
.halloween #target {
    display: none;
}
.halloween p {
    color: black;
    background: white;
    padding: 30px 0px;
    width: 100%;
    text-align: center;
    margin: 20px 0px;
}
#halloweencontent {
    display: none;
}
.halloween #halloweencontent {
    display: block;
    text-align: center;
    padding: 50px 0px;
    width: 100%;
    color: white;
    background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="target">Click for Halloween</button>
<p>Hello</p>
<div id="halloweencontent">Content for halloween goes here. Lorem ipsum dolor ismet. Content for halloween goes here. Lorem ipsum dolor ismet. Content for halloween goes here. Lorem ipsum dolor ismet. Content for halloween goes here. Lorem ipsum dolor ismet. Content for halloween goes here. Lorem ipsum dolor ismet. Content for halloween goes here. Lorem ipsum dolor ismet. </div>

＆＃13;

Answer 3

如果可以使用jquery，您可以定义一个单独的样式，如halloween.css，并将所有样式万圣节放在那里。当按钮中发生事件单击时，只需交换链接的href属性以引用新样式：

JQUERY：

$(document).ready(function(){
  $( "#click").click(function() {
    $("link").attr("href","halloween.css");
  });
});

HTML：

<button id="#click">Click</button>

在查看页面时更改CSS代码

3 个答案: