脚本话CSS

最新推荐文章于 2023-12-28 23:09:13 发布

一身风骨擎天破

最新推荐文章于 2023-12-28 23:09:13 发布

阅读量55

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/m0_54581080/article/details/118516207

版权

读取CSS元素

style

例如，运行div.style,会展示出div能用的所有的能用的css属性

style 是行间样式，只认识写在它行间的值,和getComputedStyle不同，这个是最终显示在文档的值

可读写行间样式，没有兼容问题，碰到Float这样的保留字属性，前面应加css

cssfloat

复合属性必须拆解，组合单词变成小驼峰式写法

写入的值必须是字符串格式

window.getComputedStyle(ele,null);

计算样式只读，除了Style,其他访问CSS的只能读，不能写;

返回的计算样式的值都是绝对值，没有相对单位，例如10em，显示的就是160px、颜色红色red,显示的就是rgb(255,0,0)形式;

IE8及以下不兼容

但IE有自己的操作方式

ele.currentStyle

计算样式只读，

返回的计算值不是经过转换的值，意思是写的10em就是10em.

封装一个方法，解决兼容性问题，很实用：

<script>
     function getstyle(elem,prop){
                if(window.getComputedStyle){
                    return window.getComputedStyle(elem,null)[prop]
                }else{
                    return elem.currentStyle[prop];
                }
            }
            //:elem是DOM元素,prop是想获取CSS什么属性
           // getComputedStyle(ele,null)里null是放伪元素的，只此一个方法
</script>

另外突发奇想，想用伪元素写一个点击图片变色的程序

<!DOCTYPE html>
<html lang="en">
    <head>
        <style type="text/css">
       .green::after{
            content:"";
            width:50px;
            height:50px;
            background-color: green;
            display:inline-block;
                    }
       .yellow::after{
            content:"";
            width:50px;
            height:50px;
            background-color: yellow;
            display:inline-block;
        }

        </style>
<meta charset="UTF-8">
    </head>
    <body>
        <div class = "green" style="background-color:#000000;width: 100px;height: 100px;opacity: 0.5;">
        </div>
        <script>

             
            var div = document.getElementsByTagName('div')[0];
            var count = 0;
            div.onclick = function () {
                count ++;
                if(count % 2 == 1){
                    this.className = "yellow";
                }else{
                    this.className = "green";
                }
            }
        </script>

一身风骨擎天破

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
脚本话CSS

读取CSS元素style例如，运行div.style,会展示出div能用的所有的能用的css属性style是行间样式，只认识写在它行间的值,和getComputedStyle不同，这个是最终显示在文档的值可读写行间样式，没有兼容问题，碰到Float这样的保留字属性，前面应加csscssfloat复合属性必须拆解，组合单词变成小驼峰式写法写入的值必须是字符串格式window.getComputedStyle(ele,null);计算样式只读，除了Style,其...
复制链接

扫一扫