首页>问答>css>js激活CSS样式,该如

js激活CSS样式,该如何实现?

2018-01-29 17:40 分类:css
问题描述:
我想知道如何通过JavaScript来询问用户是否要激活CSS样式, 如果用户点击JS中的确认框上的接受,它将激活CSS代码,如果用户点击取消,它将显示一个正常的CSS样式。
什么是比较好的实现方法吗?
解决方案一:

可以通过在<body>标记中使用ID来制作不同的主题,一般都是这样实现的。例如在你的css样式表中写成如下样式:
#theme1 p { color: green; } // js教程
#theme2 p { color: red;   } // js问答
demo如下:
document.getElementById("change").onclick = function(){
    var con = window.confirm("Would you like to use our custom CSS?"); //html教程
    if (con) document.body.id = "theme2";
}
#theme1 p { color: green; } // css问答

#theme2 p { color: red;   } // css教程
<body id="theme1">
    <p>Test</p>
    <p>Test</p>
    
    <input id="change" type="button" value="change theme">
</body>
解决方案二:
在你的样式表中定义好需要激活的样式,在适当的业务时机弹出提示框请用户确认是否要激活样式,如果用户确认要激活样式,则通过js给页面中元素增加个css类,代码如下:
if(window.confirm('Do you wish to use our custom styling?')) {
  document.querySelector('#content').classList.add('approved');
}
#content.approved .hello-world {
  background-color: #F00;
}
<div id="content">
  <div class="hello-world">This background is red when you accept the popup!</div>
</div>
解决方案三:
对问题描述不是很清楚,提问者有一种简单的解决方案,但可能与你期望的得到的不太相符,可以将需要激活的样式单独写到一个样式表中,然后在需要的情况下通过js去加载这个外引css进来,代码示例如下:
$('#acceptButton').on('click', function(){
   $('head').append('<link rel="stylesheet" href="customstyle.css" />');
});
总结:
提问者对问题描述的不是很清晰,从提问者的描述中可以看出其可能希望的是一个换肤功能,在业务逻辑的某一个时刻弹出一个提示框,然后询问用户是否需要换肤吗?对于换肤功能基本做法就是做好皮肤,即写好皮肤的css样式,然后通过js去切换css类或切换外引css样式表的加载,希望以上的回答能够帮到提问者以及给各位开发同学一个参考。
上一篇:没有了
下一篇:没有了
相关文章
    暂无相关内容
最新教程最新教程 更多>>
html2018-01-31 16:39
css2018-01-31 16:37