JavaScript/CSS:更改显示属性

javascript/css: change display property

本文关键字：显示 属性 CSS JavaScript      更新时间：2023-09-26

如果可能的话，我想在没有documentGetElementById的情况下更改显示，但以下内容不起作用。.html

<a href="javascript:void();" onclick="toggleFaq('1')">Instructions</a><div id="showfaq1" style="display:none;">Open Box.  Remove device. </div>

JavaScript：

function toggleFaq(faqid) {
//alert(faqid);
var divname = "showfaq"+faqid;
//alert(divname);
divname.style.display="block";
}

谁能告诉我我做错了什么？

谢谢。

我不明白你为什么不想使用getElementById，但是...

如果你有这样的元素顺序

<a href="javascript:void();" onclick="toggleFaq('1')">Instructions</a>
<div id="showfaq1" style="display:none;">Open Box.  Remove device. </div>
<a href="javascript:void();" onclick="toggleFaq('2')">Instructions</a>
<div id="showfaq2" style="display:none;">Open Box.  Remove device. </div>
...
<a href="javascript:void();" onclick="toggleFaq('N')">Instructions</a>
<div id="showfaqN" style="display:none;">Open Box.  Remove device. </div>

您可以使用 

<a href="javascript:void();" onclick="toggleFaq(this)">Instructions</a>

function toggleFaq(obj) {
   obj.nextElementSibling.style.display = 'block';
}

在你的代码中，divname是一个包含字符串"showfaq1"的变量，它没有style属性。

要更改元素的样式，您需要对该元素的引用，您可以使用document.getElementById(divname)获得该元素：

function toggleFaq(faqid) {
    //alert(faqid);
    var divname = "showfaq"+faqid;
    //alert(divname);
    document.getElementById(divname).style.display="block";
}

如果你对document.getElementById过敏，你可以使用document.querySelector('[id="' + divname +'"]');，但它的支持不如前者，而且速度较慢。

发布一个单独的答案，因为它对我以前的答案没有影响。但是你可以制作完全没有JS的基本机制，然后如果需要，使用基于JS的解决方案之一在损坏的浏览器中修复它：

.HTML 

<a href="#showfaq1">Instructions</a>
<div id="showfaq1">Open Box.  Remove device. </div>

.CSS

a + div { display:none; }
a:focus + div, a + div:target { display:block; }

演示

相关文章：