如何在JavaScript中隐藏多个元素?

新手
<!DOCTYPE html> 
<html> 

<head> 
   <title> 
       Hide or show HTML elements using 
       visibility property in JavaScript 
   </title> 

   <style> 
           .container { 
           height: 80px; 
           width: 250px; 
           border: 2px solid black; 
           background-color: green; 
           color: white; 
   </style> 
</head> 

<body> 
   <center> 
       <div class="container"> 
           <h1>Number of Child</h1> 
       </div> 

       <p class="container2"> 
           Click the buttons to show 
           or hide the green box 
       </p> 
 <input type="radio" id="female" name="gender" value="female"  onclick="showElement()"
        checked>
           <label for="female">Female</label>
        <label for="male">Male</label>
         <input type="radio" id="male" name="gender" value="male" onclick="hideElement()">  

   </center> 

   <script type="text/javascript"> 
       function showElement() { 
           element = document.querySelector(".container"); 
           element = document.querySelector(".container2"); 

           element.style.visibility = 'visible'; 
       } 

       function hideElement() { 
           element = document.querySelector(".container"); 
           element = document.querySelector(".container2"); 

           element.style.visibility = 'hidden'; 
       } 
   </script> 
</body> 

</html>

好的,这是简单的代码,我要定位2个元素,分别是:“。container”和“ .container2”

但是方法document.querySelector只能选择一个,我该如何解决?

链接到代码:https : //jsfiddle.net/7cgmq0tx/

测试_

第二个querySelector覆盖第一个,您应该使用两个变量:

   <script type="text/javascript"> 
       function showElement() { 
           element1 = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element1.style.visibility = 'visible'; 
           element2.style.visibility = 'visible'; 
       } 

       function hideElement() { 
           element1 = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element1.style.visibility = 'hidden'; 
           element2.style.visibility = 'visible'; 
       } 
   </script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Javascript中隐藏元素

来自分类Dev

如何使用JavaScript隐藏多个元素

来自分类Dev

如何在JavaSCript中从数组中打印多个元素?

来自分类Dev

如何在 vanilla javascript 中通过 DOM 创建多个元素?

来自分类Dev

如何在AngularJS中显示隐藏的元素?

来自分类Dev

如何在流星中隐藏/显示元素?

来自分类Dev

如何在DIV中隐藏特定的A元素

来自分类Dev

如何在流星中隐藏动态元素?

来自分类Dev

如何在设计器中隐藏元素?

来自分类Dev

如何在JComboBox中隐藏元素?

来自分类Dev

如何在画布中隐藏元素/对象?

来自分类Dev

如何在一个选择器jQuery中显示和隐藏多个元素?

来自分类Dev

如何在字符串中包含隐藏的HTML元素-Javascript-数据表-jQuery

来自分类Dev

如何在javascript中隐藏错误消息

来自分类Dev

如何在javascript中隐藏div?

来自分类Dev

如何在JavaScript中隐藏警报框

来自分类Dev

如何在javascript中隐藏错误消息

来自分类Dev

如何在javascript中更改隐藏值?

来自分类Dev

如何在列表中插入多个元素?

来自分类Dev

如何在单击按钮时使用JavaScript隐藏SVG元素?

来自分类Dev

如何在javascript动画结束时隐藏元素

来自分类Dev

如何在JavaScript中记录或打印数组中的多个元素?

来自分类Dev

如何在单个div中显示和隐藏元素?

来自分类Dev

AngularJS:如何在角度中隐藏单击的元素?

来自分类Dev

如何在Safari Reader中隐藏某些页面元素?

来自分类Dev

如何在移动或小窗口上的HTML中隐藏元素?

来自分类Dev

react-native:如何在createStackNavigator中隐藏元素

来自分类Dev

如何在jQuery中隐藏没有$ this的父元素?

来自分类Dev

如何在R中隐藏和调用列表的元素?

Related 相关文章

热门标签

归档