琴& 2018-12-02 13:19 采纳率: 50%
浏览 2974
已采纳

为什么将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条回答 默认 最新

  • 天际的海浪 2018-12-02 14:41
    关注
                function gr(s1, s2) {
                    document.querySelector(s1).style.display = "block";
                    document.querySelector(s2).style.display = "none";
                }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)