blocks|key|2445436|text|你也有同样的问题，为什么不花点时间研究一下。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2445437|他们使用jquery将链接的属性值更改为样式表。|2445438|How+do+I+switch+my+CSS+stylesheet+using+jQuery?|offset|length|2445439|谢谢。|2445440|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/7846980/how-do-i-switch-my-css-stylesheet-using-jquery^0|0|0|0|1B|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>You have the same problem with this one, why don't take sometime to look into this.</p>

<p>They used jquery to change the attribute value of the link to the stylesheet.</p>

<p><a href="https://stackoverflow.com/questions/7846980/how-do-i-switch-my-css-stylesheet-using-jquery">How do I switch my CSS stylesheet using jQuery?</a></p>

<p>Thank you.</p>


blocks|key|1403161|text|应该有许多类似的问题和答案，这里有一个无论如何。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1403162|<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>|code-block|syntax|javascript|1403163|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>There should be many similar questions and answers, here's one anyway.</p>

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


blocks|key|2911322|text|在您的<head>部分中，放置如下内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2911323|++<link+rel="stylesheet"+id="currentStyle"+href="theme1.css">|code-block|syntax|javascript|2911324|然后在您的代码块中，执行如下操作：|2911325|+$(+function()
+{
++++++$("button").click(+function()
+++++++++++{
++++++++++++++++$("#currentStyle").attr(+"href",+$(this).attr("id")+%2B+".css"+);
+++++++++++}+);
+}+);|2911326|当单击按钮将页面的样式表设置为附加".css“的按钮的ID值时，它将连接一个调用的函数。因此，如果单击了带有id="theme1“的按钮，则为”mee1.css“。|2911327|entityMap^0|3|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>In your <code>&lt;head&gt;</code> section, put something like this:</p>

<pre><code>  &lt;link rel="stylesheet" id="currentStyle" href="theme1.css"&gt;
</code></pre>

<p>Then in your code block, do something like this:</p>

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

<p>It will hook up a function that is called whenever a button is clicked to set the page's style sheet to be the button's ID value with ".css" appended to it.  So "theme1.css" if the button with id="theme1" is clicked.</p>


blocks|key|2445572|text|尝试使用style元素，并将type设置为text/plain；单击input+type="button"+set+style+type="text/css"以文本形式显示class与input+type="button"的id相同的内容。方法维护同一文档中的所有css，无需在样式的每个切换处请求外部样式表。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2445573|​|2445574|$("input[type=button]").click(function()+{
++$("[type$=css]").text($("."+%2B+this.id).text())
})|code-block|syntax|javascript|2445575|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style+type="text/css">
</style>
<style+type="text/plain"+class="theme1">
++/*+Theme+1+*/+
++body+{+background:+#ff4455;+}
</style>
<style+type="text/plain"+class="theme2">
++/*+Theme+2+*/+
++body+{+background:+#ee7744;+}
</style>

<body>
++<input+type="button"+id="theme1"+value="theme1">
++<input+type="button"+id="theme2"+value="theme2">
</body>|2445576|2445577|entityMap^0|4|5|E|4|L|A|Y|J|1M|L|2E|5|2K|J|34|2|3O|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|Q|$]]

<p>Try using <code>style</code> elements with <code>type</code> set to <code>text/plain</code> ; on click of <code>input type="button"</code> set <code>style type="text/css"</code> to text content of <code>style type="text/plain"</code> having <code>class</code> same as <code>id</code> of <code>input type="button"</code> clicked . Approach maintains all <code>css</code> in same document , without need to request external style sheet at each toggle of styles</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("input[type=button]").click(function() {
  $("[type$=css]").text($("." + this.id).text())
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
&lt;/style&gt;
&lt;style type="text/plain" class="theme1"&gt;
  /* Theme 1 */ 
  body { background: #ff4455; }
&lt;/style&gt;
&lt;style type="text/plain" class="theme2"&gt;
  /* Theme 2 */ 
  body { background: #ee7744; }
&lt;/style&gt;

&lt;body&gt;
  &lt;input type="button" id="theme1" value="theme1"&gt;
  &lt;input type="button" id="theme2" value="theme2"&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


<p>I need to find the right code in jquery that will allow me to switch between stylesheets fast with buttons. I currently have no jquery, for all of mine failed. I am still learning it. Anyway, here is the html:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Theme 1 */
body {
	background: #ff4455;
}
/* Theme 2 */
body {
	background: #ee7744;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;body&gt;
	&lt;input type="button" id="theme1"&gt;
	&lt;input type="button" id="theme2"&gt;

	&lt;script type="text/javascript"&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>Here is a snippet of the code. I need the jquery inside the <code>&lt;script type="text/javascript"&gt;&lt;/script&gt;</code></p>

<p>Thanks for your help! :D</p>


Switching stylesheets using jquery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要在jquery中找到正确的代码，这样我就可以在样式表之间快速切换按钮。我目前没有jquery，因为我所有的都失败了。我还在学呢。总之，这里是html：​/* Theme 1 */body {background: #ff4455;}/* Theme 2 */body {background: #ee7744;}<...

问使用jquery切换样式表
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery切换样式表EN