JavaScriptでCSSを設定する方法

JavaScript で CSS を設定する方法: 1. インライン スタイルを通じてスタイル オブジェクトを直接設定します; 2. グローバル スタイルを追加してスタイル属性を設定します; 3. JavaScript を使用してクラス「add()」とクラスを追加および削除します「remove()」でCSSを設定します。

この記事の動作環境: Windows7 システム、javascript1.8.5&&HTML5&&CSS3 バージョン、Dell G3 コンピューター。

JavaScript は CSS スタイルを設定します

1. スタイル オブジェクトを直接設定します (インライン スタイル)

JavaScript を使用して要素のスタイルを設定する最も簡単な方法は、次のとおりです。 style 属性を使用します。 JavaScript を通じてアクセスするすべての HTML 要素にスタイル オブジェクトがあります。このオブジェクトを使用すると、CSS プロパティを指定し、その値を設定できます。たとえば、これは、ID 値デモを使用して HTML 要素のフォントの色、背景色、スタイルを設定するスタイルです:

var myElement = document.querySelector("#demo");
// 把颜色设置成紫色
elem.style.color = 'purple';  
// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';  
// 将高度设置为150 px
elem.style.height = '150px';

注: JavaScript では、代わりにキャメル ケースの原則 (たとえば、backgroundColor) が使用されます。ダッシュ (背景色) 属性名を表します

style 属性は要素にスタイルをインラインで追加します:

<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">     
     Hello, world! 
</div>

ただし、これによりマークアップが非常に混乱する可能性があります。ブラウザのレンダリングパフォーマンスも悪いです。

2. style 属性を設定します -- グローバル スタイルを追加します

もう 1 つの方法は、 の CSS 属性を持つ要素を DOM に挿入することです。これは、1 つの要素だけではなく要素のグループに適用するスタイルを設定する場合に便利です。

まず、スタイル要素を作成します。

var style = document.createElement('style');

次に、innerHTML を通じてスタイルを

var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';

最後に、スタイルを DOM に挿入します。これを行うには、DOM 内で見つかった最初の script タグを取得し、insertBefore() を使用してスタイル タグを追加します。

// 创建我们的样式表
var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';
// 获取第一个脚本标记
var ref = document.querySelector('script');
// 在第一个脚本标签之前插入新样式
ref.parentNode.insertBefore(style, ref);

3. JavaScript を使用してクラスを追加および削除します: add() および Remove() [推奨学習: JavaScript 上級チュートリアル #]

このメソッドにはクラス値の追加と削除が含まれ、これにより適用されるスタイル ルールが変更されます。たとえば、次のようなスタイル ルールがあるとします。

.disableMenu {
    display: none;
}

HTML には、ドロップダウン ID を持つメニューがあります。

<ul id="dropDown">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

ここで、.disableMenu スタイル ルールを変更したい場合は、次のようにします。この要素については、disableMenu をクラス値として DropDown 要素に追加するだけです。

<ul class="disableMenu" id="dropDown">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JavaScript を使用して同じ結果を達成するには、classList API を使用します。この API を使用すると、HTML 要素にクラス値を追加または削除することが非常に簡単になります。

disableMenu クラス名を DropDown 要素に追加するには、HTML 要素の classList 属性で add() メソッドを使用します。

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.add("disableMenu");

disableMenu クラス名を削除するには、 classList APIのremove()メソッド:

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.remove("disableMenu");

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