js基础知识（二十九）--操作样式

最新推荐文章于 2024-03-17 21:57:30 发布

任重道远。

最新推荐文章于 2024-03-17 21:57:30 发布

阅读量292

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_47928499/article/details/126311986

版权

一、操作样式
修改元素的样式：元素.style.样式名=样式值
样式名通常可以直接写，但是如果样式名中带有-必须进行修改，将-号去掉，-后的字母大写,例如：background-color改为backgroundColor

通过style所修改的样式都是内联样式，所以修改完后通常会立即生效

getComputedStyle(),该函数用来获取元素的当前样式，
参数：
1.要获取样式的对象
2.要获取样式的伪元素
返回值：返回一个对象，对象中存储了当前元素的所有样式,所带的值都是有单位的

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-top: 20px;
        }
    </style>

    <script>
        /*
        修改元素的样式：元素.style.样式名=样式值
        样式名通常可以直接写，但是如果样式名中带有-必须进行修改，将-号去掉，-后的字母大写,例如：background-color改为backgroundColor
        
        通过style所修改的样式都是内联样式，所以修改完后通常会立即生效
        */

        window.onload = function () {
            // 获取box
            let box = document.getElementById('box');
            // 创建一个变量
            let width = 100;
            document.getElementById('btn').onclick = function () {
                width += 10;
                // 点击按钮的时候修改box的大小
                // box.style.width = width + 'px';
                // box.style.height = width + 'px';

                // 点击修改颜色
                box.style.backgroundColor = "orange ";
            };
            document.getElementById('btn2').onclick = function () {
                // 读取元素的样式,通过style读取样式时，只能读取内联样式
                // alert(box.style.width);

                /*
                getComputedStyle(),该函数用来获取元素的当前样式，
                参数：
                1.要获取样式的对象
                2.要获取样式的伪元素
                返回值：返回一个对象，对象中存储了当前元素的所有样式,所带的值都是有单位的
                */
                let boxStyle = getComputedStyle(box);
                alert(boxStyle.width);
            };
        }
    </script>
</head>

<body>
    <button id="btn">按钮</button>
    <button id="btn2">按钮2</button>
    <div id="box"></div>
</body>

</html>