JavaScript 脚本化css

最新推荐文章于 2021-07-27 14:54:21 发布

Reagan_

最新推荐文章于 2021-07-27 14:54:21 发布

阅读量347

点赞数 1

分类专栏： JavaScript web

本文链接：https://blog.csdn.net/Reagan_/article/details/81362083

版权

web 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

JavaScript

28 篇文章 0 订阅

订阅专栏

脚本化css

（脚本化是控制的意思）

读写元素css属性
- dom.style.prop（写入操作）
  - 可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css
    eg：float –> cssFloat
  - 复合属性建议拆解（比如width、height分成两个语句写），组合单词变成小驼峰式写法
  - 写入的值必须是字符串格式
查询计算样式（完全是读取操作）
- 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>

Reagan_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 脚本化css

脚本化css（脚本化是控制的意思）读写元素css属性 dom.style.prop（写入操作）可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css eg：float –&amp;gt; cssFloat复合属性建议拆解（比如width、height分成两个语句写），组合单词变成小驼峰式写法写入的值必须是字符串格式查询计算样式（完全是读取操作） windo...
复制链接

扫一扫