如何在 JavaScript 中覆寫 !important 樣式規則？

覆蓋JavaScript 中的!important 樣式規則

當嘗試修改HTML 元素的外觀時，您可能會遇到!important CSS 聲明，這些聲明似乎會阻止JavaScript 的覆蓋範圍。這可能會令人沮喪，但可以繞過這些重要規則。

使用內聯屬性

一種方法是將「style」屬性直接指派給元素。此樣式屬性應包含所需的屬性和值。透過在值後面附加 !important，您可以覆寫外部 !important 聲明。

element.setAttribute('style', 'display:inline !important');

修改 CSS 文字屬性

或者，您可以修改元素的樣式物件的「cssText」屬性。此屬性包含元素的整個 CSS 程式碼。透過為此屬性分配新的 CSS 程式碼，您可以覆蓋現有樣式，包括任何！重要規則。

element.style.cssText = 'display:inline !important';

使用 jQuery 外掛程式

為了方便解決方案，您可以使用我在 GitHub 上提供的名為「important」的 jQuery 外掛程式。該插件提供了用於操作元素中重要規則的附加功能。

setProperty 方法

此外，CSSOM（CSS 物件模型）提供了一種名為「setProperty」的方法，該方法允許您可以設定具有特定優先級的CSS 屬性。您可以使用此方法來覆寫 !important 規則。

element.style.setProperty('background-color', 'red', 'important');

透過使用這些方法中的任何一個，您可以使用 JavaScript 成功覆寫 !important 樣式規則。

以上是如何在 JavaScript 中覆寫 !important 樣式規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！