Question

我需要在jquery中找到合适的代码，这样我才能使用按钮快速切换样式表。我目前没有jquery，因为我的所有失败。我还在学习它。无论如何，这是html：

/* Theme 1 */
body {
	background: #ff4455;
}
/* Theme 2 */
body {
	background: #ee7744;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
	<input type="button" id="theme1">
	<input type="button" id="theme2">

	<script type="text/javascript"></script>
</body>

以下是代码片段。我需要<script type="text/javascript"></script>

中的jquery

感谢您的帮助！：d

Answer 1

你遇到同样的问题，为什么不花一些时间来研究这个问题。

他们使用jquery将链接的属性值更改为样式表。

How do I switch my CSS stylesheet using jQuery?

谢谢。

Answer 2

应该有很多类似的问题和答案，无论如何都是这样。

<html>
<head>
    <link href="css/sheet1.css" rel="stylesheet" type="text/css" id="sheet1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <input type="button" id="theme1">
    <input type="button" id="theme2">
    <script type="text/javascript">
    $(document).ready(function () {
        $('#theme1').click(function(){
            $('#sheet2').remove();
            $('head').append('<link href="css/sheet1.css" rel="stylesheet" id="sheet1" />');
        });
        $('#theme2').click(function(){
            $('#sheet1').remove();
            $('head').append('<link href="css/sheet1.css" rel="stylesheet" id="sheet2" />');
        });
    });
    </script>
</body>
</html>

Answer 3

在<head>部分中，输入以下内容：

  <link rel="stylesheet" id="currentStyle" href="theme1.css">

然后在您的代码块中，执行以下操作：

 $( function()
 {
      $("button").click( function()
           {
                $("#currentStyle").attr( "href", $(this).attr("id") + ".css" );
           } );
 } );

它会挂钩一个函数，只要单击一个按钮，就可以将页面的样式表设置为按钮的ID值，使用＆＃34; .css＆＃34;附加到它。所以＆＃34; theme1.css＆＃34;如果id =＆＃34; theme1＆＃34;点击。

Answer 4

尝试使用设置为style的{{1}}的{{1}}元素;点击type设置text/plain，input type="button"的文字内容style type="text/css"与点击的style type="text/plain" class相同。方法维护同一文档中的所有id，而无需在每个样式切换中请求外部样式表

＆＃13;

input type="button"

＆＃13;

css

＆＃13;

使用jquery切换样式表

4 个答案: