尝试覆盖动态生成的内联样式 [英] Trying to override a dynamically generated inline style

问题描述

我试图快速修复在WordPress网站上被破解的内容。问题是，别人创造了汤三明治，我卡住了它。我有一个元素显示在页面上的两个不同部分。第一种是后置状态表单，第二次出现在评论添加部分中，该部分在页面上无限期地重复。代码块对注释起作用，但对状态表单不起作用，所以我不想简单地将它隐藏起来，直到我弄清楚如何：A）找到代码正在生成的位置，B）修复问题。

该元素具有一种在元素加载时动态应用（假设为javascript）的样式。它开始隐藏，然后在管道的某处显示它。

这是我的代码的样子，首先是工作的元素：

 < div class =activity-comments> 
< div class =audio_controls freshstyle> 
 .... 
< / div> 
< / div> 
  

被破坏的区块：

 < div id =whats-new-post-in-box> 
< div class =audio_controls freshstyle =display：block;> 
 ... 
< / div> 
< div> 
  

因此，在第一个代码块中，代码没有任何样式，由于某些奇怪的原因，无论如何，它都会留下样式标签，而不会使用任何样式（完全愚蠢且格式不正确的代码）。但在第二个元素中，那个破坏的元素有一个在运行时动态写入的display：block。我试图找出如何强制它显示：无。我试过js，但我不知道怎么调用它不正确（不知道如何调用嵌套元素，我只想在该嵌套ID内的audio_controls，但不是其他类）。

任何人对我有什么想法？

解决方案

您可以使用CSS来完成它：

 ＃whats-new-post-in-box> .audio_controls.fresh {
 display：none！important; 
 
 $ / code> 

！important 样式规则可以重写内联样式规则（除非内联样式规则也是 ！important ）。

或者，在任何现代浏览器上使用JavaScript：

  var list = document.querySelectorAll（＃whats-new-post-in-box .audio_controls.fresh）; 
 var n; 
 for（n = 0; 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解决方案，您需要运行该代码 之后，不管它是将样式放在第一位......

I'm trying to quickly fix something that is broken on a wordpress site. The problem is that someone else created the soup sandwhich and I'm stuck fixing it. I have an element that shows up in two different sections on the page. The first is a post-status form, the second time it shows up is in a comment-add section that repeats indefinitely on the page. The block of code works on the comments, but doesn't work on the status form, so I wan't to simply hide it until I figure out how to A) find where the heck the code is being generated, B) fix the issue.

The element has a style that is being dynamically applied (assuming javascript) at load of the element. It starts off hidden, then something somewhere down the pipe shows it.

Here is what my code looks like, first the element that works:

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

The block that is broken:

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

So in that first block the code sits without a style in it, which for some odd reason whoever wrote it left the style tag in anyway without any style to apply (completely stupid and malformed code). But in the second element, the one that's broke, it has a display:block dynamically written in at run time. I'm trying to figure out how to force it to display:none. I've tried js, but I'm somehow not calling it correctly (not sure how to call nested elements, I only want the audio_controls within that nested ID but not the other class).

Anyone have any ideas for me?

解决方案

You can do it with CSS:

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

An !important style rule can override an inline style rule (unless the inline style rule is also !important).

Alternately, with JavaScript on any modern browser:

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";
}

For older browsers it's more of a pain:

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;
}

Obviously, for the two JS solutions, you need to run that code after whatever it is that's setting the style in the first place...

这篇关于尝试覆盖动态生成的内联样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！