weixin_43645287
琴&
采纳率75%
2018-12-02 13:19

为什么将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条回答

  • jslang 天际的海浪 3年前
                function gr(s1, s2) {
                    document.querySelector(s1).style.display = "block";
                    document.querySelector(s2).style.display = "none";
                }
    
    
    点赞 1 评论 复制链接分享
  • wanlbbb wanlbbb 3年前

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

    点赞 1 评论 复制链接分享
  • crf_moonlight crf_moonlight 3年前

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

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

    点赞 1 评论 复制链接分享