JS を使用して CSS スタイルを動的に設定する一般的な方法のまとめ

CSS スタイルを動的に設定するには、次のようなものがあります

1. 場合によっては、この重要な設定は無効です

属性に「-」記号がある場合は、それを記述します。キャメルケース (textAlign など) - 記号を保持したい場合は、角括弧の形式を使用します。 element.style['text-align'] = '100px';

element.style.height = '100px';

2 属性を直接設定します。 (特定の属性にのみ使用でき、関連するスタイルは自動的に識別されます)

element.setAttribute('height', 100);
element.setAttribute('height', '100px');

3. スタイルの属性を設定します

element.setAttribute('style', 'height: 100px !important');

4. setProperty を使用します。 3番目のパラメータを設定するにはこのメソッドを使用することをお勧めします

element.style.setProperty('height', '300px', 'important');

5.JQのクラス変更メソッドなどのクラス変更

JSはCSSの擬似要素を取得できないため、動的にスタイルを変更できます。疑似要素の親のクラスを変更して疑似要素

element.className = 'blue';
element.className += 'blue fb';

6. cssText

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

を設定します

7. 新しいCSSスタイルファイルを作成して導入します

function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js';
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle('.box {height: 100px !important;}');

8.使用するaddRule、insertRule

// 在原有样式操作
document.styleSheets[0].addRule('.box', 'height: 100px');
document.styleSheets[0].insertRule('.box {height: 100px}', 0);
// 或者插入新样式时操作
var styleEl = document.createElement('style'),
styleSheet = styleEl.sheet;
styleSheet.addRule('.box', 'height: 100px');
styleSheet.insertRule('.box {height: 100px}', 0);
document.head.appendChild(styleEl);