web前端学习

概述

在JavaScript中，常通过属性名称查看和修改DOM元素的CSS属性。查看DOM元素CSS属性的语法格式如下： DOM元素.style.属性名称 修改DOM元素CSS属性的语法格式如下： DOM元素.style.属性名称 = 新的属性值

1.查看DOM元素的CSS属性

style只能获取元素的内联样式，各种样式获取的通用方法使用如下方式： currentStyle（仅限IE8及以前使用） getComputedStyle（Firefox、opera、safari、chrome浏览器）语法格式分别为： window.currentStyle["attr'] window.getComputedStyle(ob, pseudoElt)["attr']

	
<div id="div_style_test" style="color:green">
	<span id="span_style_test">
		这是文本
	</span>
</div>

这是文本

	
var style_object = document.getElementById("div_style_test");
//只能内联样式
console.info(style_object.style.color);
//内部、内联、外部样式都可
console.info(window.getComputedStyle(style_object, null)["color"];

2.修改DOM元素的CSS属性

	
<div id="div_style_test2" style="color:green">
	<span id="span_style_test2">
		这是文本
	</span>
</div>

这是文本

	
var style_object2 = document.getElementById("div_style_test2");
function change_css(){
	style_object2.style.color = "red";
}