zoukankan      html  css  js  c++  java
  • 动态切换css

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

    <link rel="stylesheet"  id="stylelink" type="text/css"/>

    <a href="#" onclick='javascript:document.getElementById("stylelink").href = "blue.css";return false;'>1111</a>
    <a href="#" onclick='javascript:document.getElementById("stylelink").href = "red.css";return false;'>1111</a>

    方法二:

     <!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>
  • 相关阅读:
    CF321D
    oracle 第25章 闪回技术
    oracle 第24章 Netbackup 备份恢复
    oracle 第23章 RMAN 备份恢复
    oracle 第22章 EXP/IMP/EXPDP/IMPDP 备份恢复
    oracle 第21章 dblink
    oracle 第20章 序列号和同义词
    oracle 第19章 视图
    oracle 第18章 索引
    oracle 第17章 表
  • 原文地址:https://www.cnblogs.com/FlyCat/p/2573749.html
Copyright © 2011-2022 走看看