jQuery は CSS クラス ルールを直接変更できますか?

jQuery を使用した CSS クラス ルールの変更

あなたの質問は、CSS クラス ルールをオンザフライで変更することを中心にしています。これは、jQuery の多用途性に適していると思われるタスクです。ただし、jQuery のコア機能は、CSS クラス ルールを直接操作する手段を明示的に提供していないことに注意することが重要です。

クラス内でのみフォント サイズを変更する

にもかかわらず制限がある場合でも、JavaScript のネイティブ styleSheets プロパティを使用して最初の目標を達成できます。概念実証は次のとおりです。

<code class="javascript">// Iterate over style sheets
for (let i = 0; i < document.styleSheets.length; i++) {
    const rules = document.styleSheets[i].cssRules || document.styleSheets[i].rules;

    // Search for the target class selector
    for (let j = 0; j < rules.length; j++) {
        if (rules[j].selectorText === ".classname") {
            // Update the font size property only
            rules[j].style.fontSize = "16px";
        }
    }
}</code>

変更されたスタイルの保存

2 番目の質問については、jQuery には CSS の変更を保存する簡単な方法がありません。次のアプローチを検討できます:

• CSS スタイルシートを解析し、JavaScript を使用して変更されたルールを抽出します。
• 変更された CSS 宣言の文字列表現を作成します。
• 送信保存またはさらなる処理のために AJAX を使用してサーバーに文字列を送信します。

このアプローチでは追加のサーバー側実装が必要ですが、要件に対する可能な解決策が提供されます。さらに詳しい情報については、提供されている参考資料を参照してください。

• [document.styleSheets (Mozilla)](https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets )
• [CssRule オブジェクト (Mozilla)](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule)
• [document.styleSheets (MSDN) ](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms531194(v=vs.85))
• [ CssRule オブジェクト (MSDN)](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms531192(v=vs.85))

以上がjQuery は CSS クラス ルールを直接変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。