DOM中样式操作，元素的显示与隐藏，多敲代码才能领悟代码的奥秘

最新推荐文章于 2023-06-27 10:39:43 发布

Ednburgh-

最新推荐文章于 2023-06-27 10:39:43 发布

阅读量1.6k

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_71345904/article/details/125416184

版权

1，element.style 行内样式操作

2，element.className 类名样式操作

3，如果给标签做点击事件，事件源，操作源都是同一个标签，可以使用this属性来代替指向

二，元素的显示与隐藏

1，display属性(重点，结合js实现样式操作）

display：none；隐藏对象

display：block，除了可以转换块元素性质外，还可以显示元素

注意：display隐藏元素后不再占据原来的位置

2，visibility：risible显示对象

visibility：hidden隐藏对象

注意：visibility属性隐藏元素后还占据原来的位置

多运用于显示广告和隐藏广告

案例练习----------关闭广告

<style>
    *{margin: 0;
    padding: 0;}
    .adv{
        width: 200px;
        height: 200px;
        background-color: blue;
        position: fixed;
        top: 50%;
        margin-top: -100px;
        font-size: 30px;
        text-align: center;
        line-height: 200px;

    }
     .hover{ 
        width: 50px;
        height: 50px;
        background-color: azure;
        font-size: 10px;


    } 
    .close{
        width: 200px;
        height: 50px;
        background-color: red;
       position: relative;
       top: 130px;
       text-align: center;

    }
</style>
</head>
<body>
    <div class="adv">
我是广告
    </div>
    <div class="close">关闭广告</div>
    <script>
        var adv=document.querySelector('.adv');
        var close=document.querySelector('.close')
var flag=false;
close.onclick=function(){
    flag=!flag;
    if(flag){
      adv.style.display='none'
      close.innerHTML="打开广告"

    }else{
        adv.style.display='block'
        close.innerHTML="关闭广告"
    }
         
}
    </script>
</body>

结果呈现，点击关闭广告前

点击关闭广告后

这个案例结合了css中样式的呈现和js中DOM操作执行相结合，运用了css中定位，元素隐藏，等功能，运用了js中函数对象，if条件判断（开关法），事件的获取，样式最终的操作。

Ednburgh-

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM中样式操作，元素的显示与隐藏，多敲代码才能领悟代码的奥秘

1，element.style 行内样式操作2，element.className 类名样式操作3，如果给标签做点击事件，事件源，操作源都是同一个标签，可以使用this属性来代替指向二，元素的显示与隐藏1，display属性(重点，结合js实现样式操作）display：none；隐藏对象display：block，除了可以转换块元素性质外，还可以显示元素注意：display隐藏元素后不再占据原来的位置2，visibility：risible显示对象visibility：hidden隐藏对象注意：...
复制链接

扫一扫