ホームページ  >  記事  >  ウェブフロントエンド  >  ネイティブJSでCSSを設定する方法

ネイティブJSでCSSを設定する方法

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-04-21 10:25:243848ブラウズ

方法: 1. スタイル「style.property=value」ステートメントを使用して設定します。 2. 「setAttribute(property, value)」ステートメントを使用して設定します。 3. 「setProperty(property, value)」ステートメントを使用します。 )" ステートメントを使用して設定します。 4. "style.cssText='property:value'" ステートメントを使用して設定します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JS を使用して CSS スタイルを動的に設定します (インライン スタイルに設定)。一般的なものには次のようなものがあります。

1. スタイル属性を直接設定する場合によってはこの設定を使用してください! 重要な値は無効です

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

element.style.height = '100px';

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

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

3. setProperty を使用します!重要を設定する場合は、このメソッドを使用して 3 番目のパラメーターを設定することをお勧めします

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

4. Set cssText

element.style.cssText = 'height: 100px !important';   // 覆盖其他行内样式
element.style.cssText += 'height: 100px !important';   // 追加行内样式

[推奨学習: JavaScript 上級チュートリアル]

以上がネイティブJSでCSSを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。