JavaScriptでスタイルを追加する方法

JavaScript でスタイルを追加する方法: 1. "document.getElementById("box");" メソッド経由; 2. "head.style.cssText="..."" メソッド経由; 3 . setProperty メソッドを使用します。

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript でスタイルを追加するにはどうすればよいですか?

js は CSS スタイルを追加します

次は単純なケースです: b390322fe69e754cc2d7247050226b6d16b28748ea4df4d9c2150843fecfba68 ID を持つ div を追加したいと考えていますボックススタイルの。幅、高さ、背景色を追加していきます。

方法 1:

var head= document.getElementById("box"); //获取到id为box的div标签元素。
head.style.width = "70px"; //设置宽度为70
head.style.height = "70px";//设置高度为70
head.style.display = "#ccc";//设置背景色为灰色

この方法は比較的単純ですが、マージン、パディング、フォント サイズなどの CSS スタイルが多数ある場合は、次のように記述します。それはたくさんあるでしょう。現時点では、方法 2 を使用できます。

方法 2:

var head= document.getElementById("box");//获取到id为box的div标签元素。
head.style.cssText="width:70px;height:70px;display:#ccc";

この方法では、「cssText」を使用するため、コードが大幅に削減されます。 CSS ソース ファイルに記述するのと同じです。

方法 3: setProperty を使用する

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

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

推奨学習: "javascript 上級チュートリアル >>

以上がJavaScriptでスタイルを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。