JS-APIs 3.1 操作元素属性-常用属性,样式属性

一常用属性 

二 样式属性

1. 通过style属性操作CSS

举例子:

修改盒子

总结: 

2. 通过类名class name操作CSS (容易产生覆盖)

如何通过添加类名修改div?

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

        }
        .box {
            width: 300px;
            height: 200px;
            background-color: skyblue;
            padding: 10px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
   <div></div>
    <script>
        // 获取元素
        const div = document.querySelector('div')
        // 添加类名
        div.className = 'box'         

         
    </script>

如果我之前还有个nav属性,不想丢掉怎么办? 

可以直接保留之前的类名 

但是每次都要查找是不是有以前的类名太麻烦了

3 通过classList 操作控制CSS - 解决className 容易覆盖以前的类名

(1)追加类名 add

 

(2)删除类名 remove

(3)切换类 toggle

有类名就删掉,没有就加上

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值