js 样式操作

最新推荐文章于 2024-01-29 09:00:00 发布

山外人家

最新推荐文章于 2024-01-29 09:00:00 发布

阅读量463

点赞数

本文链接：https://blog.csdn.net/liyujia6636/article/details/52233412

版权

<!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>