js-脚本化CSS

脚本化CSS

1.读写CSS属性

• domEle.style.prop
  • 可读写行间样式，没有兼容性问题；像float这样的关键字属性应在前面加css。
  • float --> cssFloat；
  • 复合属性必须拆解，组合单词采用小驼峰式写法
  • 写入值必须是字符串格式

2.查询计算样式

• window.getComputedStyle(ele,null)[prop]
  • 计算样式只读
  • 返回的计算样式的值都是绝对值，没有相对单位
  • IE8及其以下的版本不兼容
  • ()里第二个参数可以获取伪元素的样式

<style type="text/css">
		div{
			width:100px;
		}
		div::after{
			content: "";
			width:30px;
			height:30px;
			background-color:yellow;
			display:inline-block;
		}
	</style>
<script type = 'text/javascript'>
	window.getComputedStyle(ele,"after");
</script>
	```

- ele.currentStyle[prop]
	- 计算样式只读
	- 返回的计算样式值不是经过转换的绝对值
	- IE独有的属性
- 封装获取元素样式的方法getStyle：
```javascript
function getStyle(elem,prop){
	if(window.getComputedStyle){
			return window.getComputedStyle(elem,null)[prop];
		}else{
			return elem.currentStyle[prop];
		}
	}

 

分类: JavaScript