dom笔记之设置和获取样式

行间样式

下面的代码只能操作行间样式

• cssText 的本质就是设置 HTML 元素的 style 属性值, 与getAttribute("style")不同之处在于cssText会对格式做处理，而getAttribute原样返回

  <div style="color:red;font-size:14px;" id="dom">welcome</div>
  <script>
  var dom=document.querySelector("#dom");
  console.log(domd.style.cssText);   // color: red; font-size: 14px;
  console.log(dom.getAttribute("style")); // color:red;font-size:14px;
  // 设置值的时候，会把原来的行间样式清空，重新设置
  dom.style.cssText = "width:100px;height:200px;"
  console.log(dom.style.cssText); // width: 100px; height: 200px;
  </script>

• length表示设置了多少样式

  var length = dom.style.length; // 2

• getPropertyValue/setProperty/removeProperty
  这是三个api用来对单独的样式属性进行操作

  // 获取指定样式属性的值，不能够使用fontSize
  dom.style.getPropertyValue("font-size");
  // 可以接受三个参数，第一个是属性名称，第二个是属性值，第三个是important
  dom.style.setProperty("color", "blue", "important");
  // 删除行间样式的属性
  dom.style.removeProperty("color");

• getPropertyPriority
  判断行间样式是否设置了important，如果设置了，那么返回important，如果没有设置，那么返回空

  dom.style.getPropertyPriority("color")

• cssFloat和styleFloat
  因为float是关键子，所以没有办法通过dom.style.float这样直接使用，cssFloat就是替代方式。

  dom.style.cssFloat="left";
  // 等价于
  dom.style["float"]="left";
  // 兼容IE9一下的浏览器
  dom.style.styleFloat="left";

封装style函数用来获取和设置行间样式

function style(dom,attr,val) {    
	if(arguments.length === 2) {   
		return dom.style[attr];
	} else if(arguments.length === 3) {
		return dom.style[attr] = val;
	}
}

计算后的样式

在chrome下可以看到一个computed的页签，里面就是浏览器计算过的样式，那么怎么通过js获取到计算后的属性值呢？

就是通过window.getComputedStyle(dom)[styleAttr]，需要兼容ie9一下，使用dom.currentStyle[styleAttr],styleAttr遵循驼峰命名。

function css(dom,styleAttr){
	if(dom.currentStyle){
		return dom.currentStyle[styleAttr];
		//IE下兼容
	}else{
		return getComputedStyle(dom,false)[styleAttr];  
		//非IE下兼容
	}
}

console.log(css(dom,"float"));

总结

完！