js获取不到display的属性

最新推荐文章于 2023-07-24 10:06:10 发布

水中熊

最新推荐文章于 2023-07-24 10:06:10 发布

阅读量7.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/gmd_web/article/details/49661091

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

今天偶然看到以前遗留的一个问题，现在用谷歌调试了一下，明白了，特此记录一下。

原问题+code：

为什么我的点击事件第一次点击没反应？

<html>
<head>
<style type="text/css">
body{
            background-color:#333;
        }
#myA{
            background-color:#fff;
            width:350px;
            margin-left:10px;
            color:#666;
            padding:10px;
            cursor:pointer;
        }
#hideArea{
            height:30px;
            width:350px;
            background-color:#fff;
            display:none;
        }
    </style>
</head>
<body>
<script>
        function aa(){
            var myArea = document.getElementById("hideArea");
            if(myArea.style.display=="none"){
                myArea.style.display="block";
            }
            else{
                myArea.style.display="none";
            }
        }
    </script>
<div id="myA" οnclick="aa()">不会了怎么办
  <div id="hideArea"></div>
</div>
</body>
</html>

解答：

因为js是获取不到嵌入式样式（页面的style里）的display属性，所以第一次执行aa()时，if里的就是false了，

然后执行else里的代码，而这里的代码为hideArea块加上了display=none的属性，

然后第二次点击就可以正常判断了。

感想：

学习知识就是不断的遇到问题解决问题，记得当时我问了很多人也没弄明白，现在看了一会就明白了，

真是难了不会会了不难啊，以后遇到问题，都记录下来，等以后知道的多了再去解决。

水中熊

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js获取不到display的属性

今天偶然看到以前遗留的一个问题，现在用谷歌调试了一下，明白了，特此记录一下。原问题+code：为什么我的点击事件第一次点击没反应？body{ background-color:#333; }#myA{ background-color:#fff; width:350px;
复制链接

扫一扫