通过 JavaScript 获取/设置元素样式的方法

最新推荐文章于 2024-05-08 14:55:24 发布

瓜冬瓜

最新推荐文章于 2024-05-08 14:55:24 发布

阅读量2.7k

点赞数 2

分类专栏： JavaScript 文章标签：样式 JavaScript 获取设置

本文链接：https://blog.csdn.net/weixin_42561383/article/details/90621670

版权

JavaScript 专栏收录该内容

38 篇文章 4 订阅

订阅专栏

获取方式

方法一：DOM节点.style.样式名
作用：获取内联样式，如果获取的样式没有设置或者不是内联样式，则输出空字符串""；
缺点：获取不到嵌入样式和外部样式。

	    <style type="text/css">
	        div {
	            height: 200px;
	        }
	    </style>
	
	<body>
	    <div style="background-color:green"></div>
	</body>
	
	<script>
	    var dom = document.getElementsByTagName("div")[0];
	    console.log(dom.style.backgroundColor);			//green
	    console.log(dom.style["background-color"]);		//green
	    console.log(dom.style.height);					//空字符串""
	</script>

方法二：DOM节点.currentStyle.样式名
作用：获取元素渲染之后的样式；
缺点：只能在IE浏览器使用。

        <style type="text/css">
           div{
                background-color: green;
            }
        </style>

    <body>
        <div></div>
    </body>
    
    <script>
		var dom = document.getElementsByTagName("div")[0];
        console.log(dom.currentStyle.backgroundColor);			//green
        console.log(dom.currentStyle["background-color"]);		//IE8 输出 undefined
        console.log(dom.currentStyle.height);					//IE8 输出 auto
    </script>

方法三：window.getComputedStyle(DOM节点).样式名
作用：获取元素样式的最终计算值；
缺点：不兼容IE8及以下版本。

        <style type="text/css">
            div{
                background-color: green;
            }
        </style>

    <body>
        <div></div>
    </body>
    
    <script>
    	var dom = document.getElementsByTagName("div")[0];
        console.log(window.getComputedStyle(dom,null).backgroundColor);			//rgb(0, 128, 0)
        console.log(window.getComputedStyle(dom,null)["background-color"]);		//rgb(0, 128, 0)
        console.log(window.getComputedStyle(dom,null).height);					//0px
    </script>

设置方式

方法一：DOM节点.style.样式名 = 样式值
作用：设置内联样式；
缺点：无法设置!important，设置后语句会失效。

<body>
    <div></div>
</body>

<script>
    var dom = document.getElementsByTagName("div")[0];
    dom.style.width = "300px";
    console.log(dom.style.width);		    //300px
    dom.style.height = "300px!important"; 	//这条语句会失效
</script>

方法二：DOM节点.style.setProperty(样式名, 样式值)
作用：设置内联样式，可以设置!important，语法为DOM节点.style.setProperty(样式名, 样式值, 'important')。

<body>
    <div></div>
</body>

<script>
    var dom = document.getElementsByTagName("div")[0];
    dom.style.setProperty("width", "100px", 'important');
    console.log(dom.style.width);		    //100px
</script>

方法三：DOM节点.setAttribute("style",样式值)
作用：可以设置多条内联样式，可以设置!important。

<body>
    <div></div>
</body>

<script>
    var dom = document.getElementsByTagName("div")[0];
    dom.setAttribute("style","width:100px!important; height:100px;");
    console.log(dom.style.width);		    //100px
</script>

方法四：DOM节点.style.cssText = 样式值
作用：设置多个内联样式，可以设置!important。

<body>
    <div></div>
</body>

<script>
    var dom = document.getElementsByTagName("div")[0];
    dom.style.cssText = "width: 100px!important; height:300px;";
    console.log(dom.style.width);		    //100px
</script>

方法五：document.styleSheets[数字].insertRule(样式)
作用：在样式表中添加样式；
注意：document.styleSheets用于获取应用在文档的所有样式表，获取到的结果会以数组返回，因此需要添加下标来表示document.styleSheets[数字]来表示某个样式表；
缺点：不支持IE，文档需要有外部样式表或者嵌入样式表至少一个。

<body>
    <div></div>
</body>

<script>
    var dom = document.getElementsByTagName("div")[0];
    document.styleSheets[0].insertRule("div{width: 100px!important; height: 300px;}")
    console.log(dom.style.width);		                //""
    console.log(window.getComputedStyle(dom).width);    //300px
</script>

方法六：document.styleSheets[数字].addRule(选择器,样式)
作用：在样式表中添加样式；
缺点：只能在IE浏览器使用，文档需要有外部样式表或者嵌入样式表至少一个。

<body>
    <div></div>
</body>

<script>
    var dom = document.getElementsByTagName("div")[0];
    document.styleSheets[0].addRule("div","width: 100px!important; height: 200px;")
    console.log(dom.style.width);		                //""
    console.log(dom.currentStyle.width);    			//300px
</script>

瓜冬瓜

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
通过 JavaScript 获取/设置元素样式的方法

方法一：DOM节点.style.width / height作用：获取内联样式的width和height缺点：获取不到嵌入样式和外部样式的width和height。 <body> <div id="box1" style="width:200px;"></div> </body> <script> co...
复制链接

扫一扫