JavaScript で ! important スタイル ルールをオーバーライドする方法

JavaScript での ! important スタイル ルールのオーバーライド

HTML 要素の外観を変更しようとすると、JavaScript からのオーバーライドを妨げているように見える ! important CSS 宣言に遭遇することがあります。 。これはイライラするかもしれませんが、!重要なルールを回避することは可能です。

インライン属性の使用

1 つの方法は、「style」属性を直接要素。このスタイル属性には、必要なプロパティと値を含める必要があります。値に ! important を追加すると、外部の ! important 宣言をオーバーライドできます。

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

CSS テキスト プロパティの変更

あるいは、要素のスタイルを変更することもできます。オブジェクトの「cssText」プロパティ。このプロパティには、要素の CSS コード全体が含まれます。このプロパティに新しい CSS コードを割り当てることで、!重要なルールを含む既存のスタイルをオーバーライドできます。

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

jQuery プラグインの使用

解決策としては、GitHub で入手可能な「重要」という名前の jQuery プラグインを使用できます。このプラグインは、要素内の !重要なルールを操作するための追加関数を提供します。

setProperty メソッド

さらに、CSSOM (CSS Object Model) は、次のことを可能にする「setProperty」と呼ばれるメソッドを提供します。 CSS プロパティを特定の優先度で設定できます。このメソッドを使用して、!重要なルールをオーバーライドできます。

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

これらのメソッドのいずれかを使用すると、JavaScript を使用して !重要なスタイル ルールを正常にオーバーライドできます。

以上がJavaScript で ! important スタイル ルールをオーバーライドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。