JavaScript修改与访问CSS

我们知道JavaScript可以很方便地修改元素的CSS属性。例如我们想要修改x元素的color属性，只需要如下代码就可以了：

x.style.color = "blue";

通过修改元素的style属性即可。唯一需要注意的是形如font-size这种有“-”的CSS属性在JavaScript中需要改写为fontSize。

修改CSS属性简单，但是访问起来就不见得了。我们知道，有多种方式添加CSS样式，而我们使用"x.style.color"并不一定能返回设置在x元素上的color属性。我们需要使用比较复杂一点的方法。

访问元素CSS属性

很不幸，不同的浏览器访问CSS属性的方法并不完全相同。IE中需要使用元素的currentStyle属性；而W3C标准中则使用window的getComputedStyle方法。《ppk谈JavaScript》一书中有如下跨浏览器的函数来获得一个元素的特定CSS属性。

function getRealStyle(id,styleName){
var element = document.getElementById(id);
var realStyle = null;
if(element.currentStyle){
	realStyle = element.currentStyle[styleName];
}else if(window.getComputedStyle){
	realStyle = window.getComputedStyle(element,null)[styleName];
}
return realStyle;
}

我们试验一下用下面的代码来访问当前页面中id为content的div的CSS属性，并且把这些属性显示出来。JavaScript代码如下:

<script type="text/javascript">
function getRealStyle(id,styleName){
	var element = document.getElementById(id);
	var realStyle = null;
	if(element.currentStyle){
		realStyle = element.currentStyle[styleName];
	}else if(window.getComputedStyle){
		realStyle = window.getComputedStyle(element,null)[styleName];
	}
	return realStyle;
}
function addEventSimple(obj,evt,fn){
	if(obj.addEventListener){
		obj.addEventListener(evt,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent('on'+evt,fn);
	}
}
addEventSimple(window,'load',init);
function init(){
	addEventSimple(document,'click',clickFunc);
}
function clickFunc(){
	var str = "";
	str += "color：" + getRealStyle("content","color");
	str += "<br />width：" + getRealStyle("content","width");
	str += "<br />padding-top：" + getRealStyle("content","paddingTop");
	str += "<br />margin-top：" + getRealStyle("content","marginTop");
	str += "<br />font-size：" + getRealStyle("content","fontSize");
	var watchScreen = document.getElementById("watchScreen");
	watchScreen.innerHTML = str;
}
</script>

实际效果如下：

我是黑板。在任何位置点击鼠标就会的到id为content的div的CSS属性。

注意，访问border、padding这种缩略属性不能保证返回正常结果。

  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误