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

醉折花枝作酒筹
リリース: 2023-01-05 16:10:13
オリジナル
3865 人が閲覧しました

方法: 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート