通过DOM修改css的属性

最新推荐文章于 2024-09-10 10:26:23 发布

「已注销」

最新推荐文章于 2024-09-10 10:26:23 发布

阅读量643

点赞数

分类专栏： css+html js 文章标签： js css javascript html5

本文链接：https://blog.csdn.net/xing_kai_kai/article/details/107315008

版权

本文介绍了如何通过JavaScript来修改和读取元素的CSS样式。重点讲述了通过元素.style属性设置和读取内联样式，注意了CSS样式名在JS中的转换规则，并提到了内联样式与!important的优先级问题。此外，还对比了在不同浏览器中读取样式的方法，包括IE浏览器的currentStyle和非IE浏览器的getComputedStyle()，并指出这些方法返回的样式是只读的，修改样式需要通过style属性。

摘要由CSDN通过智能技术生成

通过JS修改元素的样式：

语法：
元素.style.样式名 = 样式值

注意：
如果CSS的样式名中含有-，
这种名称在JS中是不合法的比如background-color
需要将这种样式名修改为驼峰命名法，
去掉-，然后将-后的字母大写

我们通过style属性设置的样式都是内联样式，
而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

但是如果在样式中写了!important，则此时样式会有最高的优先级，
即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
所以尽量不要为样式添加!important

通过js读取css属性（行内样式）

语法：
元素.style.样式名
注意：
通过style属性设置和读取的都是内联样式
无法读取样式表中的样式

案列：

<head>
	<style type="text/css">			
		#box1{
    
			width: 100px;
			height: 100px;
			background-color: red;
		}			
		</style>		
		<script type="text/javascript">			
			window.onload = function(){
    				
				/*
				 * 点击按钮以后，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.<