JavaScript使用DOM修改、操作和读取CSS样式

最新推荐文章于 2022-07-16 22:31:17 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2022-07-16 22:31:17 发布

阅读量391

点赞数 2

分类专栏： JavaScript CSS3 HTML5 文章标签： javascript css js html

本文链接：https://blog.csdn.net/m0_47015897/article/details/115420626

版权

CSS3 同时被 3 个专栏收录

38 篇文章 16 订阅

订阅专栏

HTML5

37 篇文章 8 订阅

订阅专栏

JavaScript

30 篇文章 0 订阅

订阅专栏

注：本案例通过单击button按钮来体现css样式被修改和读取的过程

操作CSS样式效果图：
在这里插入图片描述
读取CSS样式效果图：

DOM操作CSS样式源码及解析：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用DOM操作CSS样式</title>
        <style>
            #box1{
                width: 200px;
                height: 200px !important;
                background-color: tomato;
            }
        </style>
        <script>
            window.onload = function(){
                /* 
                    点击按钮以后，修改box1大小
                 */
                //获取box1
                var box1 = document.getElementById("box1");
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function(){
                    console.log("abc");
                    //修改box1的宽度
                    /* 
                        通过JS修改元素的样式：
                            语法： 元素.style.元素名 = 样式值;

                        注意： 如果css的样式名中含有“-”
                            这种名称在JS中是不合法的比如background-color
                            需要将这种样式名修改为驼峰命名法
                            去掉 “-”，然后将“-”后的字母大写

                        我们通过style属性设置的样式都是内联样式，
                            而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

                        但是如果在样式中写了 !important，此时样式会有最高的优先级，
                            即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
                            故尽量不为样式添加 !important

                        通过style属性读取和设置的样式都是内联样式
                            无法读取到样式表中的样式
                     */
                    box1.style.width = "300px";
                    box1.style.backgroundColor = "#40f0f5";

                    box1.style.height = "500px"; //height被“!important”修饰，故无法更改其属性值
                    
                }

                //单击btn02后，读取元素的样式
                var btn02 = document.getElementById("btn02");
                btn02.onclick = function(){
                    //读取box01的样式
                    /* 
                        语法： 元素.style.样式名
                     */
                    console.log(box1.style.backgroundColor);

                };
            };
        </script>
    </head>
    <body>
        <button id="btn01">CLICK</button>
        <button id="btn02">CLICK</button>
        <div id="box1">

        </div>
    </body>
</html>

DOM读取CSS样式源码及解析：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>读取CSS样式</title>
        <style>
            #box1{
                width: 200px;
                height: 200px !important;
                background-color: tomato;
            }
        </style>
        <script>
            window.onload = function(){
                //点击btn01获取box1的样式
                var box1 = document.getElementById("box1");
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function(){
                    /* 
                        currentStyle只有IE浏览器支持，其他浏览器都不支持
                        获取元素的当前显示的样式：
                            语法： 元素.correntStyle.样式名
                        它可以用来读取当前元素正在显示的格式
                            如果当前元素没有设置该样式，则获取它的默认值
                     */
                    // console.log(box1.currentStyle.backgroundColor);

                    /* 
                        在其他浏览器中可以使用
                            getComputedStyle()这个方法来获取元素当前的样式
                            这个方法是window的方法，可以直接使用
                        需要两个参数
                            第一个：要获取样式的元素
                            第二个：可以传递一个伪元素，一般都传null
                        
                        该方法会返回一个对象，对相中封装了当前元素对应的样式
                            可以通过   对象.样式名  来读取样式
                            如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                            比如： 没有设置width，它不会获取到auto，而是一个长度
                        
                        但是该方法不支持IE8及以下的浏览器

                        通过currentStyle和getComputedStyle()读取到的样式都是只读的，
                            不能修改如果要修该必须通过style属性
                     */
                    
                    //正常留浏览器的方式
                    // var box = getComputedStyle(box1,null);
                    // console.log(box.backgroundColor);
                    // console.log(box.height);

                    //IE8的方式
                    // console.log(box1.currentStyle.backgroundColor);

                    //全部兼容的方式
                    console.log(getStyle(box1, "height"));//属性名必须使用双引号，因为在getStyle方法中引用name使用的是方括号
                };
            };
            /* 
                定义一个函数，用来获取指定元素的当前样式
                参数：
                    obj 要获取样式的元素
                    name 要获取的样式名
             */

             function getStyle(obj, name){
                //此处条件不可直接使用getComputedStyle作为参数，因为在浏览器中变量没找到会报错
                // 而作为window的属性使用，属性找不到会返回false，如果是IE8浏览器则会返回false
                //  如果是IE8以上的版本或者其他类型浏览器，则返回true
                if(window.getComputedStyle){
                    //正常浏览器的方式，具有getComputedStyle方法
                    return getComputedStyle(obj, null)[name];
                }else{
                    //IE8的方式，没有getComputedStyle方法
                    return obj.currentStyle[name];
                }

                //另一种方法
                //该方法有缺陷，因为IE9/10/11即含有currentStyle属性有含有getComputedStyle方法
                // if(obj.currentStyle){
                //     return obj.currentStyle[name];
                // }else{
                //     return obj.getComputedStyle[name];
                // }
            }

        </script>
    </head>
    <body>
        <button id="btn01">CLICK</button>
        <br>
        <br>

        <div id="box1" style="height: 300px;">

        </div>
    </body>
</html>

希望本案例能够让你有所收获，加油！

Etui۹(･༥･´)و ̑̑

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript使用DOM修改、操作和读取CSS样式

注：本案例通过单击button按钮来体现css样式被修改和读取的过程操作CSS样式效果图：读取CSS样式效果图：DOM操作CSS样式源码及解析：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>使用DOM操作CSS样式</title> <style>
复制链接

扫一扫