JS:通过getElementsByClassName隐藏某些元素

时间:2012-11-13 19:58:21

标签: javascript hidden invisible getelementsbyclassname

我正在尝试设置一个脚本,用某个类名设置不可见的所有内容。 这是我试图呼吁的一个例子:

<script type="text/javascript">
function hideItems(){
        document.getElementsByClassName('class1').style.visibility = "hidden";      
}
</script>

类名在表的维度上,类似于此示例:

<table onclick="hideItems()" width="200" border="1">
  <tr>
    <td class="class1">1</td>
    <td class="class2">2</td>
    <td class="class3">3</td>
    <td class="class1">1</td>
    <td class="class2">2</td>
    <td class="class3">3</td>
  </tr>
  <tr>
    <td class="class3">3</td>
    <td class="class1">1</td>
    <td class="class2">2</td>
    <td class="class3">3</td>
    <td class="class1">1</td>
    <td class="class2">2</td>
  </tr>
</table>

最后,将有一个三个复选框,根据选择三个中的哪一个显示尺寸。那部分,我可以做得很好,但是将特定维度变为隐形是我目前遇到的问题。

提前感谢您提供任何帮助。

1 个答案:

答案 0 :(得分:16)

getElementsByClassName返回一个集合。除非您使用jquery

之类的框架,否则无法集体设置属性
var elems = document.getElementsByClassName('class1');

for(var i = 0; i != elems.length; ++i)
{
elems[i].style.visibility = "hidden"; // hidden has to be a string
}