为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用jQuery切换CSS样式表?

如何使用jQuery切换CSS样式表?

慕码人2483693 2019-08-06 17:50:20
如何使用jQuery切换CSS样式表?我正在做的事情很简单。您单击一个按钮(id="themes"),它会打开一个(id="themedrop")向下滑动的div 并列出主题。(此时我只有两个)<button id="original">Original</button><br /><button id="grayscale">Grayscale</button>现在当网站加载时,它加载style1.css(主/原始主题)<link rel="stylesheet" type="text/css" href="style1.css">现在我想弄清楚的是......如何点击灰度按钮将样式表从style1.css更改为style2.css(注意:文件在同一目录中)任何帮助将非常感激。
查看完整描述

3 回答

?
牛魔王的故事

TA贡献1830条经验 获得超3个赞

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

尝试一下,但不确定它是否会起作用我没有测试过,但运气好。


查看完整回答
反对 回复 2019-08-06
?
小唯快跑啊

TA贡献1863条经验 获得超2个赞

我建议你给link-tag一个id如主题。将css文件的名称data放在按钮上的-attribute中,并对它们使用相同的处理程序:

HTML:

<link id="theme" rel="stylesheet" href="style1.css"><button id="grayscale" data-theme="style2.css">Gray Theme</button>

和js:

$("button[data-theme]").click(function() {
    $("head link#theme").attr("href", $(this).data("theme"));}


查看完整回答
反对 回复 2019-08-06
?
守着一只汪

TA贡献1872条经验 获得超3个赞

快速的方法是,


<link id="original" rel="stylesheet" type="text/css" href="style1.css">

<script>

function turnGrey(){

document.getElementById("original").href="grey.css";<!-- what ever your new css file is called-->

}

</script>

<button id="grey" onclick="turnGrey">Turn Grey</button><br />


查看完整回答
反对 回复 2019-08-06
  • 3 回答
  • 0 关注
  • 882 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信