javascript 使用 CSS 覆盖通过 JS 添加的内联样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11281633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Override Inline Styles added via JS with CSS
提问by Jamie Hutber
A js plugin is adding a style that is giving me some headache:
一个 js 插件添加了一种让我头疼的样式：
element.style {
z-index: 100 !important;
}
So i have tried this:
所以我试过这个：
html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView
div.janrainHeader[style] {
z-index: 1 !important;
}
and still nothing.
还是什么都没有。
回答by Jeff Clemens
Contrary to the other answers, it is possible to override inline styles with CSS:
与其他答案相反，可以使用 CSS 覆盖内联样式：
http://css-tricks.com/override-inline-styles-with-css/
http://css-tricks.com/override-inline-styles-with-css/
I would guess that the extremely long selector might not be hitting the element.
我猜想极长的选择器可能不会击中元素。
I had a similar z-index issue with the Janrain plugin that was solved by this:
我在 Janrain 插件上遇到了类似的 z-index 问题，该问题已解决：
#janrainEngageEmbed > div[style] {
z-index: 0;
}
In your case, you probably need:
在您的情况下，您可能需要：
z-index: 0 !important;
回答by John Green
The inline style will trump any selectors. Either reset the style yourself in javascript or patch the plugin... it doesn't sound like a particularly well written anyway, to be honest. : )
内联样式将胜过任何选择器。要么自己在 javascript 中重置样式，要么修补插件……老实说，这听起来不是特别好。:)
回答by Luca
inline style always override external and internal css, plus the fact that the plugin is using the !importantclause (very bad practice!), all together makes it impossible to get it fixed with css only. I reckon you will have to use some custom js to override the plugin settings.
内联样式总是覆盖外部和内部 css，加上插件使用了!important子句的事实（非常糟糕的做法！），所有这些都使得仅用 css 修复它是不可能的。我认为您将不得不使用一些自定义 js 来覆盖插件设置。
maybe the best way would be to check if you can specify a callback function with the plugin and set the style as you wanted. another answer here suggested to edit the plugin itself, that is cool if you don't plan to ever update it - otherwise you're better off leaving the plugin code as it is, and just adding some bespoke js of your own
也许最好的方法是检查您是否可以使用插件指定回调函数并根据需要设置样式。这里的另一个答案建议编辑插件本身，如果您不打算更新它，那很酷 - 否则您最好保留插件代码原样，只需添加一些您自己的定制 js
