使用DOM操作样式

最新推荐文章于 2024-06-30 10:06:58 发布

周白卿

最新推荐文章于 2024-06-30 10:06:58 发布

阅读量458

点赞数

分类专栏： JavaScript学习笔记文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_51088023/article/details/125875785

版权

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

通过JavaScript修改元素的样式

style属性

语法：元素.style.样式名 = 样式值

如果css的样式名中含有-，这种名称在js中式不合法的，比如background-color
需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写
通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过js修改的样式或覆盖掉原本的样式并立即显示
但是如果在样式中写了!importent，则此时样式会具有最高的优先级，即使通过js也不能覆盖掉该样式，此时会导致js修改样式失效，尽量不要为样式增加!importent
通过style设置和读取的都是内联样式，无法读取样式表（style标签里）的样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 2px solid;
            border-top-width: 10px;
        }
    </style>
    <script>
        window.onload = function () {
            //获取box1
            var box1 = document.getElementById("box1");
            //获取btn1
            var btn1 = document.getElementById("btn1");
            //点击按钮后改变box1样式
            btn1.onclick = function(){
                box1.style.width = "300px";
                box1.style.height = "300px";
                box1.style.backgroundColor = "yellow";
                box1.style.borderTopWidth = "20px";
                //读取box1的宽度
                alert(box1.style.width);   
                //只有在修改了宽度之后才能读取出来
                //因为box1本身并没有定义内联样式         
            };

        };
    </script>
</head>

<body>
    <button id="btn1">点我一下</button>
    <div id="box1"></div>
</body>

</html>

获取元素当前显示的样式

currentStyle属性

语法：元素.currentStyle.样式名

它可以用来读取当前元素正在显示的样式
如果当前元素没有设置样式，则它获取它的默认值，比如没有设置width，它会获取到auto
currentStyle只有IE浏览器支持，其他的浏览器都不支持

getComputedStyle()方法

语法： getComputedStyle(参数1，参数2).样式名

getComputedStyle()方法是window的方法，可以直接使用
该方法需要两个参数：

第一个，需要获取样式的元素
第二个，可以传递一个伪元素，一般都为null

getComputedStyle(参数1，参数2)会返回一个对象，对象中封装了当前元素对应的所有样式，可以通过对象.样式名来获取某个样式
如果获取的样式没有设置，则会获取到当前显示的值，而不是默认值，比如没有设置width，它不会获取到auto，而是一个具体的长度
但是该方法不支持IE8及以下的浏览器

ps:通过currentStyle属性和getComputedStyle()方法获取到的样式都是只读的，无法修改，如果需要修改必须通过style属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        window.onload = function () {
            //获取box1
            var box1 = document.getElementById("box1");
            //获取btn1
            var btn1 = document.getElementById("btn1");
            //点击按钮后获取box1样式
            btn1.onclick = function(){
/*-----------------------IE8浏览器获取样式的方式------------------*/
                //读取box1的宽度
                alert(box1.currentStyle.width);  
                //获取box1的长度
                alert(box1.currentStyle.height);  
/*-----------------------正常浏览器获取样式的方式------------------*/
                //读取box1的宽度
                alert(getComputedStyle(box1,null).width);  
                //获取box1的长度
                alert(getComputedStyle(box1,null).height); 
/*--------------------同时兼容正常浏览器和IE8浏览器-----------------*/
                //定义一个函数，用来获取指定元素当前样式
                //第一个参数obj，要获取样式的元素
                //第二个参数name，要获取的样式名
                function getStyle(obj,name){
                    if(window.getComputedStyle){
                        //判断浏览器内是否有getComputedStyle()方法
                        //如果有则返回使用getComputedStyle()方法获取的样式
                        //必须要写window.getComputedStyle，不能直接写getComputedStyle
                        //因为如果直接写getComputedStyle进行判断，在本函数中找不到会继续向全局范围内找
                        //如果找不到会直接报错，不执行else后的代码，无法兼容IE8浏览器
                        return getComputedStyle(obj,null)[name];
                    }
                    else{
                        //如果浏览器没有getComputedStyle()方法
                        //则返回使用currentStyle属性获取的样式
                        return obj.currentStyle[name];
                    }
                    //或者直接使用三目运算符进行判断
                    return window.getComputedStyle?window.getComputedStyle(obj,null)[name]:obj.currentStyle[name];
                }
                //获取box1的宽度
                alert(getStyle(box1,"width"));
            };
        };
    </script>
</head>

<body>
    <button id="btn1">点我一下</button>
    <div id="box1"></div>
</body>

</html>