《JavaScript视频18》操作内联样式

本文链接：https://blog.csdn.net/Han_python/article/details/113484954

本文介绍了如何使用JavaScript操作HTML元素的内联样式，包括设置和读取。内联样式通过element.style属性设置，如box.style.backgroundColor。同时，讲解了在不同浏览器下读取元素当前显示样式的两种方法：IE的currentStyle和非IE浏览器的getComputedStyle。对于样式读取，由于兼容性问题，建议使用条件判断进行适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

操作内联样式

style属性：

元素.style.样式名 = "样式值";

如果css样式名中含有-，比如background-color，需要将这种样式名修改为驼峰命名法

box.style.backgroundColor = "yellow";

我们通过style属性修改的是内联样式，因为内联样式有较高的优先级，所以一般会立即显示，除非原样式后面有!imporant

如果要读取原内联样式的属性，直接把等号及后面内容删去即可，只能读取内联样式，而不能读取样式表中的样式。

读取元素的样式

获取当前的显示样式语法：

元素.currentStyle.样式名;

可以读取当前元素正在显示的样式，但是只有IE浏览器支持

在其他浏览器可以使用getComputedStyle()这个方法来获取元素的当前样式，这个方法是window的方法，可以直接调用。
需要两个参数：

要获取样式的元素
可以传递一个伪元素，一般为null

var obj = getComputedStyle(boxes,null);
alert(obj.width);

该方法会返回一个对象，对象中封装了当前元素对应的样式。

但是这种方法不兼容IE。

通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能够修改。

如果想要兼容IE和其他浏览器，需要做判断，判断当前浏览器是否有getComputedStyle这个属性，代码如下：

function getStyle (obj, name){
	//此处要加window，如果不加，IE会把getComputedStyle当成
	//变量在作用域中寻找，加了之后，是window的属性
	if(window.getComputedStyle){
		//加个中括号传递元素
		return getComputedStyle(obj,null)[name];
	}else{
		return obj.currentStyle[name];
	}
}
alert(getStyle(boxes,"width")) ;