为什么将css样式放在css文件和直接在标签中使用style属性所表现的不同?

第一种直接在div标签上标明style

        <div class="changeX">a元素</div>
        <div class="changeY" style="display: none;">b元素</div>
        <input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" />
        <button onclick="gr('.changeY','.changeX');">切换显示b元素</button>
        <script type="text/javascript">
            function gr(s1, s2) {
                document.querySelector(s1).style.display = "";
                document.querySelector(s2).style.display = "none";
            }
        </script> 

可以实现点击按钮使各内容表示

第二种将代码分离

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>测试代码</title>
        <style type="text/css">
            .changeY{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="changeX">a元素</div>
        <div class="changeY">b元素</div>
        <input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" />
        <button onclick="gr('.changeY','.changeX');">切换显示b元素</button>
        <script type="text/javascript">
            function gr(s1, s2) {
                document.querySelector(s1).style.display = "";
                document.querySelector(s2).style.display = "none";
            }
        </script>
    </body>
</html>

只能实现点击第二个按钮将盒子内容隐藏而不能显示盒子内容

3个回答

            function gr(s1, s2) {
                document.querySelector(s1).style.display = "block";
                document.querySelector(s2).style.display = "none";
            }

jslang
天际的海浪 回复weixin_43645287: 多个有相同class标签要改用document.querySelectorAll()获取一个数组。然后循环逐一设置
10 个月之前 回复
weixin_43645287
名山小奏 回复weixin_43645287: 问题已解决!谢谢
10 个月之前 回复
weixin_43645287
名山小奏 那同时选择多个有相同class标签呢
10 个月之前 回复

你 ".changeY"类已经有display:none了, 用函数这是只是让div标签里面的style没有, 然后就应用类.changeY, display: none

要将代码分离, 切换显示不显示, 直接切换类ok? 一个类show, 一个类hide就完事了....
代码分离了就不要直接该element标签里的style了

document.querySelector(s2).style.display,这个里边的style是元素的属性,属性上的样式是优先于类,但熟悉标签没有的情况下,类标签就生效了。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!