js 样式操作

来源：互联网发布：西科软件科技有限公司编辑：程序博客网时间：2024/05/29 15:53
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link id="style" rel="stylesheet" href="test.css">    <style>        .div1{            background-color:black;            width:50px;            height:50px;        }        .div2{            border:5px solid black;        }    </style>    <style></style></head><body>    <!--行内样式优先级最高-->    <div id="div1" class="div2" style=" background-color:red; width:100px; height:100px; "></div>     <script>        var oDiv1 = document.getElementById("div1");        // 第一种改变样式的方法，一句只能改变一个属性，js里面用到css属性带“-”的首字母大写的方式表示        oDiv1.style.backgroundColor = "green";        oDiv1.style.width = "200px";        oDiv1.style.height = "200px";        // 第二种改变样式的方法，可以重写行内样式表，没有重写的就被删除了，在内嵌样式表和外部样式表的内容不会被改变        oDiv1.style.cssText = " background-color:yellow; width:300px; height:300px; ";        // 上面两种方法，样式混在逻辑里，第三种改变样式的方法，通过添加className，要注意避免覆盖已有的class，优先级不如行内样式，所以效果没有呈现        oDiv1.className += " div1";        //第四种改变样式的方法，替换外部样式表，可以一次更改很多元素的样式        var oStyle = document.getElementById("style");        oStyle.href = "test_replace.css";         // 这么多种更改样式的方法，使用getComputedStyle实际应用的样式，返回一个CSSStyleDeclaration对象，里面包含了目标元素所有样式，IE9-使用currentStyle，        var div_style = window.getComputedStyle(oDiv1);        // var div_style = oDiv1.currentStyle;        console.log(div_style.backgroundColor);        console.log(div_style.width);        console.log(div_style.height);        // js创建一个外部样式表        function loadStyles(url){            var link = document.createElement("link");            link.rel = "stylesheet";            link.type = "text/css";            link.href = url;            var head = document.getElementsByTagName("head")[0];            head.appendChild(link);        }        loadStyles("style.css");        // 通过document.styleSheets获得应用于文档的所有样式表，包括link和style，不包括行内样式和动态替换和添加的外部样式表        var sheet = null;        for( var i=0, len = document.styleSheets.length; i<len; i++){            sheet = document.styleSheets[i];            console.log(sheet.href);        }        // 可以获得替换后和动态添加的外部样式表        var link = document.getElementsByTagName("link");        for( var i=0, len = link.length; i<len; i++){            console.log(link[i].href);        }    </script></body></html>
0 0