web-dev-qa-db-ja.com

jQueryはCSSスタイル定義を変更できますか？ （各要素の個々のCSSではありません）

私はjQueryが変更などのCSS定義を変更できると言っているドキュメントを見たことはありません

td { padding: 0.2em 1.2em }

に

td { padding: 0.32em 2em }

ただし、スタイルシート全体を変更するか、各要素のクラスを変更するか、各要素のcssを変更する必要があります。

スタイル定義の変更は可能ですか？

javascriptjquerycssstylesheet
36
nonopolarity

スタイルシートへのDOMアクセスはありますが、IEには互換性の問題がたくさんあるため、これは避けがちです。

より良い方法は、通常、祖先で単純なクラス変更を使用して、変更を間接的にトリガーすることです。

_td { padding: 0.2em 1.2em }
body.changed td { padding: 0.32em 2em }
_

ここで、$('body').addClass('changed')とすべてのtdsを更新します。

スタイルシートをフロブする必要がある場合：

_var sheet= document.styleSheets[0];
var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; // IE compatibility
rules[0].style.padding= '0.32em 2em';
_

これは、問題のtdルールが最初のスタイルシートの最初のルールであることを前提としています。そうでない場合は、正しいselectorTextを探すルールを反復して検索する必要があるかもしれません。または、新しい規則を最後に追加して、古い規則を上書きします。

_if ('insertRule' in sheet)
    sheet.insertRule('td { padding: 0.32em 2em }', rules.length);
else // IE compatibility
    sheet.addRule('td', 'padding: 0.32em 2em', rules.length);
_

jQuery自体は、スタイルシートにアクセスするための特別なツールを提供しませんが、プラグインが存在する可能性があります。

55
bobince
$('head').append('<style id="customCSS">td { padding: 0.32em 2em }</style>');

Id属性を追加したので、その変更を適用する必要がなくなったときに、ターゲットに設定して削除できます。

$('#customCSS').remove();
26
Michael Fitchett

ロードされてこれを行うまで、クラスの幅がわからないという問題に遭遇しました。

<script>
$(function() {
    calcWidth = CalculateWidth();

    $('body').prepend('<style> .dynamicWidth { width: ' + calcWidth + 'px } </style>');
}
</script>

注：ルールを「カスケード」する方法によっては、スクリプトを配置する場所（先頭に追加、追加）が重要になる場合があります。

4
Nick Sotiros

いいえ、それはこのように機能しないだけです...それを説明するより良い方法がわかりません:)

jQueryは要素で動作するように設計されています...テストのためにこれを行っている場合、ChromeコンソールのFirebugはオプションです。

あなたができることは、サーバーサイドで生成されたスタイルシートを持っています（たとえば、 ThemeRoller がそれを行う方法）、jQueryバニラJS）は動的にそれを追加します<link>をヘッダーに挿入します。

<link rel="stylesheet" href="myCSS.php?tdPad=.32|2" type="text/css" />

それが最後のリンクであった場合、それは以前に定義されたスタイルを上書きします...実際、これはThemeRollerの動作方法正確です。

1
Nick Craver