覆盖内联css！重要
覆盖内联css！重要
提问于 2018-01-07 17:25:27
如何使用javascript或CSS覆盖"color: red“样式？我想让它变成"2px“而不是"1px”的边框。
<div style="border: 1px solid #ccccc !important">
Lorem...
</div>我不能将class，id添加到"div“中。这在这里不是一个解决方案。我必须以某种方式覆盖上面的代码。
解决方案使用了网站上已经加载的jquery。Ran：$(文档).ready(function() { $('tablestyle*=border').css('border-width'，"4px")；})；https://jsfiddle.net/78oxmgLj/10/
回答 2
Stack Overflow用户
发布于 2018-01-07 17:28:50
对于你的实际代码，你不能用CSS做到这一点(正如@T.J.Crowder所评论的，没有CSS规则可以用!important内联)，但这里有一个JS解决方案：
document.querySelector('.box').style.borderWidth="2px";
document.querySelector('.box').style.borderColor="red";
//or
//document.querySelector('.box').style.border="2px solid red";<div class="box" style="border: 1px solid #cccccc!important">
Lorem...
</div>
更新
如果由于某种原因不能添加类，可以根据样式使用attribute selector (但我不建议将其用作通用解决方案)
document.querySelector('div[style*=border]').style.borderWidth="2px";
document.querySelector('div[style*=border]').style.borderColor="red";<div style="border: 1px solid #cccccc!important">
Lorem...
</div>
Stack Overflow用户
发布于 2022-01-06 10:00:05
虽然公认的答案是正确的，但根据您的用例，您可以在这里仅使用CSS来实现。即使不能覆盖特定值，也可以使用不同的属性来更改原始状态。
b {
filter: hue-rotate(250deg); /*blue*/
}
i {
display: inline-block;
transform: scale(0.4);
}<b style="color: red !important">Stack</b>
<i style="font-size: 50px !important">Stack</i>
在您的示例中，如果您需要将1px重要的内联边框更改为2px，您可以使用轮廓或框阴影而不进行模糊处理：
div:first-child {
box-shadow: 0 0 0 3px #ccc;
}<div style="border: 1px solid #cccccc !important">
Lorem...
</div>
<br>
<div style="border: 4px solid #cccccc !important">
Lorem...
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48135874
复制相关文章
相似问题
腾讯云开发者
