动态切换css

最新推荐文章于 2025-08-01 12:48:40 发布

转载最新推荐文章于 2025-08-01 12:48:40 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/FlyCat/archive/2012/07/02/2573749.html

文章标签：

#javascript #ViewUI

本文介绍了两种使用JavaScript动态切换CSS样式的方法，包括修改link元素的href属性和使用自定义函数来激活不同的样式表。

方法一：给link一个id，直接获取该DOM操作href

方法二：

 <!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
<title>无标题 1</title>
<link rel="alternate stylesheet" href="red.css" type="text/css" title="red" media="screen, projection"/>
<link rel="alternate stylesheet" href="blue.css" type="text/css" title="blue" media="screen, projection"/>

<script type="text/javascript">
    function setActiveStyleSheet(title) {
        var i, a, main;
        if (title) {
            for (i = 0; (a = document.getElementsByTagName('link')[i]); i++) {
                if (a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {
                    a.disabled = true;
                    if (a.getAttribute('title') == title) 
                     a.disabled = false;
                }
            }
        }
    }
</script>
</head>

<body>
<a href="#" onclick="setActiveStyleSheet('red'); return false;" >red</a>
<a href="#" onclick="setActiveStyleSheet('blue'); return false;" >blue</a>
<a href="#" onclick="setActiveStyleSheet('none'); return false;">none</a>
</body>
</html>