javascript - 试图覆盖动态生成的内联样式

Question

我正在尝试快速修复 wordpress 网站上出现问题的内容。问题是其他人创建了汤三明治，而我一直在修复它。我有一个元素显示在页面的两个不同部分中。第一个是后状态表单，它第二次出现在页面上无限重复的评论添加部分。该代码块适用于评论，但不适用于状态表单，所以我不想简单地隐藏它，直到我弄清楚如何 A) 找到生成代码的地方，B) 修复问题。

该元素具有在元素加载时动态应用(假设是 javascript)的样式。它一开始是隐藏的，然后管道中某处的某处显示了它。

这是我的代码的样子，首先是有效的元素:

<div class="activity-comments">
  <div class="audio_controls fresh" style>
    ....
  </div>
</div>

坏掉的方 block :

<div id="whats-new-post-in-box">
  <div class="audio_controls fresh" style="display: block;">
    ...
  </div>
<div>

因此，在第一个 block 中，代码中没有样式，出于某种奇怪的原因，无论编写它的人都留下了样式标签，但没有任何样式可供应用(完全愚蠢且格式错误的代码)。但是在第二个元素中，那个坏了的元素，它有一个 display:block 在运行时动态写入。我想弄清楚如何强制它显示:无。我已经尝试过 js，但不知何故我没有正确调用它(不确定如何调用嵌套元素，我只想要嵌套 ID 中的 audio_controls 而不是其他类)。

有人对我有什么想法吗？

Answer 1

你可以用 CSS 做到这一点:

#whats-new-post-in-box > .audio_controls.fresh {
    display: none !important;
}

!important 样式规则可以覆盖内联样式规则(除非内联样式规则也是 !important)。

或者，在 any modern browser 上使用 JavaScript :

var list = document.querySelectorAll("#whats-new-post-in-box .audio_controls.fresh");
var n;
for (n = 0; n < list.length; ++n) {
    list[n].style.display = "none";
}

对于较旧的浏览器，这更痛苦:

var elm = document.getElementById("whats-new-post-in-box").firstChild;
while (elm) {
    if (elm.className &&
        elm.className.match(/\baudio_controls\b/) &&
        elm.className.match(/\bfresh\b/)) {

        elm.style.display = "none";
    }
    elm = elm.nextSibling;
}

显然，对于这两个 JS 解决方案，您需要在 首先设置样式的任何内容之后运行该代码...