JavaScript笔记之读取元素样式

如果样式名中含有-,需要使用驼峰命名法修改样式名,以下所有都适用

• eg: background-color == backgroundColor

!important

• 样式优先级中的最高级

element.style.样式名

• 读取元素行内样式
• 只能读取行内样式
• 如果样式名中含有-,需要使用驼峰命名法修改样式名
• 可以通过此种方法设置或返回元素的行内样式
  • eg:div.style.width = 300px;

此后的属性都只是可读的,不能修改

element.currentStyle.样式名

• 读取当前元素正在显示的样式
• 仅在IE浏览器中有效
• 如果当前元素未设置该样式,则会获取该样式的默认值
  • eg: div1.currentStyle.width //如果未设置width 则返回auto

getComputedStyle()

• 这个方法用来获取元素当前的样式
• 这个方法是window的方法,可以直接使用
• 该方法会返回一个对象,对象中封装了当前元素对应的样式
• 如果获取的样式没有设置,则会获取到真实的值,而不是默认值
  • eg:没有设置width,它不会获取到auto,而是一个长度
• 此方法不适用IE8及以下的浏览器
• 语法: getComputedStyle(第一个参数,第二个参数);
  • 第一个参数:要获取样式的元素
  • 第二个参数:可以传递一个伪元素,一般都传null
• eg: var obj = getComputedStyle(box1,null); alert(obj);

处理兼容

因为两种方法都不能完全解决兼容问题,所以我们需要自定义一个函数

• 定义一个函数,用来获取指定元素的当前样式
• 参数:
  • obj : 要获取样式的元素
  • styleName : 要获取的样式名

				//正常浏览器模式
				// getComputedStyle(obj,null)[styleName];
				//IE8及以上的方式
				// obj.currentStyle[styleName];

function getStyle(obj,styleName){
			
				//第一种方法
					//如果使用getComputedStyle作为判断依据(这里getComputedStyle为变量)
					//会先在函数里找,函数里没有则在全局里找,全局里没有则会报错
					//因为getComputedStyle是全局里的,所以就是window的属性
					//所以需要使用window.getComputedStyle来进行判断才会避免不会报错
					//没有加window时getComputedStyle是一个变量,需要去作用域中寻找,
						//变量没找到会报错
					//加了一个window,变成一个对象的属性
						//属性没找到会返回undefined(未定义)
	
				//if(getComputedStyle){
				if(window.getComputedStyle){
					return getComputedStyle(obj,null)[styleName];
				}else{
					return obj.currentStyle[styleName];
				}
				
				//第二种方法
				//三目运算符形式,跟上边代码效果相同但是更精简
				return window.getComputedStyle?getComputedStyle(obj,null)[styleName]:obj.currentStyle[styleName];
			}
			//调用
			...{
			alert(getStyle(div1,"width"));
			}