2020-11-04|操作元素修改element.style|element.className

操作元素

4.4样式属性大小

我们；：可以通过js修改元素的大小，颜色和位置

使用element.style修改

element.style   //行内样式操作   适用于要修改的不多
        element.className  //类名样式操作  适用于要修改的样式很多的情况下

  <div>
        我是盒子
    </div>

div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

  //获取元素
        var div = document.querySelector('div');
        //注册事件，处理程序
        div.onclick = function() {
            //里面的属性采取驼峰命名法
            div.style.backgroundColor = 'purple';
            div.style.width = "250px";
        }

注意：如果通过js修改了style样式，产生的是行内样式，权重比css高

案例：淘宝点击关闭二维码

核心：利用样式的显示和隐藏完成，display.none隐藏元素   display.block显示元素

点击按钮，让二维码盒子隐藏起来即可

css部分修改样式  css样式很重要

 .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            /* 行内元素于行内块元素居中显示 */
            color: #f40;
        }
        
        .box img {
            width: 60px;
            margin-top: 5px;
        }
        
        .close-btn {
            position: absolute;
            /* 什么意思 */
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }

 html部分布局：

<