Javascript改变css答案

【问题标题】：Javascript to change cssJavascript改变css
【发布时间】：2012-12-05 00:51:04
【问题描述】：

我将如何创建一个脚本来检查 div 是否设置为除 display:none 之外的任何其他值。

我在手风琴上有一个图像，但是当我点击一个手风琴元素时，我想将图像隐藏在顶部。

假设我的内容是一个名为“accord_content”的类的形式，而我显示的图像是“image_over”。我可以创建一个脚本来检查是否显示了accord_content，如果显示了则隐藏“image_over”？

if ('.accord_content.display !== 'none') {
        image_over.display = 'none')
        }

只是一个快速的尝试，不擅长 javascript 所以对如何完成这个感到困惑

谢谢

新更新 - 这是我要检查的 html 的摘录

<h3 class="title">Making the shortlist</h3>
        <div class="accord_content">
        <div class="content_left">

<p>CONTENT</p>

<p>CONTENT>
    </div>

现在这是使用 jquery 手风琴 ui，所以当页面打开时，accord_content 类为 display:none，

当点击 h3 时，它会变为 display:block。

谢谢

【问题讨论】：

不确定您想要实现的具体目标，但想知道您是否过于复杂。你真的需要改变整个类的元素还是只改变一个？你真的需要检查一个元素/类是否被显示，因为你的代码可能控制它是否被隐藏/显示？
嗨 stuart 感谢您的回复，它使用 jquery 手风琴 ui，当单击 h3 时会更改元素的显示。我想覆盖一个图像，然后当单击 h3 时隐藏该图像。我已经尝试过 z index 所以它会弹出内容后面的图像而没有运气
@DIM3NSION - 您的 html 中没有对 .image_over 的引用。如果您使用的是 jquery ui 手风琴，您可能可以使用纯 css 或其他东西来做您想做的事情。您能在某处分享您的手风琴的现场示例吗？

标签： javascript html css accordion

【解决方案1】：

使用 jQuery，您可以执行以下操作：

Javascript

if ($('.accord_content').css('display') !== 'none') {
    $('.image_over').hide();
}

Demo

这将通过以下方式工作。如果任何.accord_content 可见，则所有.image_over 都将被隐藏。

或者在原生 javascript 中你可以这样做：

Javascript

if (document.querySelector('.accord_content').style.display !== 'none') {
    document.querySelector('.image_over').style.display = 'none';
}

Demo

这将获得.accord_content 的第一个实例并隐藏第一个.image_over。仅当 display: none 设置为 .accord_content 作为内联 style 属性而不是 css 时，此检查才会返回 false。

您确实应该在您的问题中发布一些相关的 html。还描述了这是如何工作的。如果您发布一个模糊的问题，您将得到一个模糊的答案。花时间发布一个好的问题，人们会花时间发布一个好的答案。

【讨论】：

请注意，这会忽略 CSS 中设置的样式。如果在样式表中将accord_content 设置为 display: none，则 .image_over 元素仍然不会显示。我不清楚这是否会成为问题。
完美，看我编辑，我确定这会起作用，只是目前不行，有什么建议吗？

【解决方案2】：

if (element.style.display !== 'none') {}

【讨论】：