版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
脚本化css
(脚本化是控制的意思)
- 读写元素css属性
- dom.style.prop(写入操作)
- 可读写行间样式,没有兼容性问题,碰到float这样的保留字属性,前面应加css
eg:float –> cssFloat - 复合属性建议拆解(比如width、height分成两个语句写),组合单词变成小驼峰式写法
- 写入的值必须是字符串格式
- 可读写行间样式,没有兼容性问题,碰到float这样的保留字属性,前面应加css
- dom.style.prop(写入操作)
- 查询计算样式(完全是读取操作)
- window.getComputerStyle(ele,null); ps:null的位置是获取伪元素样式表的
- 计算样式只读
- 返回的计算样式的值都是绝对值,没有相对单位
- IE8及IE8以下版本不兼容
辨析:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>脚本化css</title>
<style type="text/css">
div{
width :200px!important;
}
</style>
</head>
<body>
<div style="width100px;float:left;height:100px;background-color:red;"></div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
</html>
在控制台上查看同一个名字的属性,显示的值是不一样的。
这是因为,window.getComputedStyle(div,null).width获取的是现在所展示出来的,
而div.style.width获取的是行间的。
这就是两者的不同。
- 查询样式
- ele.currentStyle
- 计算样式只读
- 返回的计算样式的值不是经过转换的绝对值
- IE独有的属性
- 封装兼容性的方法:getStyle(elem,prop);很实用
1.查找属性:ele.currentStyle
console.log(div.currentStyle.width),也是只能获取,不能写入
2.获取的也是最终展示出来的值,但是是不经过计算的,比如你写em(像素),它仍然会返回这个em值
3.解决兼容性问题,获取样式:
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
function getStyle(ele,prop) {
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currenStyle[prop];
}
}
</script>
练习:
让方块运动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>脚本化css</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;"></div>
</body>
<script type="text/javascript">
function getStyle(elem,prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(elem,null)[prop];
}else{
retrun elem.currentStyle[prop];
}
}
var div = document.getElementsByTagName('div')[0];
var speed = 1;
var timer = setInterval(function(){
speed += speed/7;
dev.style.left = getStyle(div,'left') + speed + 'px';
if(parseInt(div.style.left) > 500) {
clearInterval(timer);
}
},10);
</script>
</html>