javascript - 重写内联 css !重要

Question

如何使用 javascript 或 CSS 覆盖样式“color: red”？我想让它成为“2px”而不是“1px”边框​​。

<div style="border: 1px solid #ccccc !important"> 
       Lorem... 
</div>

我无法向“div”添加类、id。这不是解决方案。我必须以某种方式覆盖上面的代码。

解决方案使用的 jquery 已经加载到网站上。然:$( document ).ready(function() { $('table[style*=border]').css('border-width',"4px"); }); https://jsfiddle.net/78oxmgLj/10/

Answer 1

对于您的实际代码，您不能使用 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>