js基础知识(二十九)--操作样式

一、操作样式
修改元素的样式:元素.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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值