jQueryを使用して:beforeセレクターのCSS幅プロパティを動的に変更する方法?

jQuery を使用して :before セレクターの CSS width プロパティを動的に変更する

ただし、:before CSS セレクターの width プロパティを直接変更することはできません。 jQuery を使用すると、回避策が存在します。新しいスタイル要素をドキュメントの先頭に動的に追加することで、目的の効果を実現できます。その方法は次のとおりです。

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

このコードは、ドキュメントの先頭に新しいスタイル要素を追加します。この要素内の CSS ルールは、.column クラス内の :before セレクターのみを対象とし、幅プロパティを 800px に設定し、既存の幅設定をオーバーライドします。

例とデモ

次の CSS ルールを考慮してください:

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

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

幅プロパティを動的に変更するには.column クラス要素の :before に次の JavaScript コードを追加します。

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

これにより、.column 要素内の :before セレクターのみの幅が変更されるようになります。このソリューションのライブ デモは、[ここ](DEMO_URL) でご覧いただけます。

代替プラグイン

上記の方法は簡単な解決策ですが、外部プラグインを調べることもできます疑似クラス ルールへの直接アクセスを提供します。ただし、このようなプラグインは、実際の環境で使用する前に調査およびテストすることをお勧めします。

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