覆蓋內聯 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>