jQuery を使用して CSS `:before` セレクターの幅を動的に調整する方法

jQuery を使用した CSS :before セレクターの動的な幅調整

目的: :before CSS セレクターで装飾された要素の width プロパティを変更します。特に特定のクラス名に続く場合。

シナリオ: 次の CSS を検討します:

.column:before {
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column {
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

タスク: の幅プロパティを変更します。 :before ルールのない要素に影響を与えることなく、jQuery を使用して .column クラスに関連付けられた :before セレクター。

解決策:

指定された回答で述べたように、jQueryは、擬似クラス ルールの直接変更をネイティブにサポートしていません。ただし、新しいスタイル要素をドキュメントの先頭に動的に追加することで、この制限を回避できます。

$('head').append('<style>.column:before {width: 800px !important;}</style>');

これにより、.column クラス内の :before セレクターに 800px の固定幅が割り当てられます。 ! important 宣言は既存のスタイルをオーバーライドすることに注意してください。

あるいは、CSS 疑似クラス ルールを変更するために特別に設計されたプラグインを使用することもできます。特定のプラグインの推奨事項はありませんが、「jQuery 擬似クラス操作」を Web 検索すると、適切な結果が得られるはずです。

以上がjQuery を使用して CSS `:before` セレクターの幅を動的に調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。