覆盖内联 css ！重要

Question

如何使用 javascript 或 CSS 覆盖样式“颜色：红色”？ 我想使它成为“2px”而不是“1px”边框​​。

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

我不能在“div”中添加一个类，id。 这不是这里的解决方案。 我必须以某种方式覆盖上面的代码。

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

Answer 1

有了您的实际代码你不能用CSS做（如@TJ克罗德评论说，没有任何可以与在线击败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>

更新

如果由于某种原因您无法添加类，您可以使用基于样式的属性选择器（但我不建议将其用作通用解决方案）

 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>

Answer 2

虽然接受的答案是正确的，但根据您的用例，您可以在此处单独使用 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>