欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > javascript >内容正文

javascript

用JS来切换CSS,很好很简单

发布时间:2025/6/15 javascript 54 豆豆
生活随笔 收集整理的这篇文章主要介绍了 用JS来切换CSS,很好很简单 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

假如我们想通过前台自主选择CSS样式来达到改变颜色、风格等目的的话,用JS调用CSS文件就OK。

先做两个(或多个)CSS文件。

style_1.css 代码:

body{background-color: #ccff66;}

......

 

style_2.css 代码:

body{background-color: #ff0000;}

......


JS代码如下:

<link rel="stylesheet" rev="stylesheet" id="style" type="text/css" media="all" />
<script>
function change_skin(obj){
    if(obj.length<1){
        return;
    }else{
        document.getElementById("style").href=obj;
    }
}
</script>
<body>
    <select οnchange="change_skin(this.value)" id="skinStyle">
        <option value="">改变风格</option>
        <option value="style_1.css">风格 1</option>
        <option value="style_2.css">风格 2</option>
    </select>
</body>

总结

以上是生活随笔为你收集整理的用JS来切换CSS,很好很简单的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。