jsでcssスタイルを設定するにはどうすればよいですか? jsでCSSスタイルを変更する方法

js で CSS スタイルを設定するにはどうすればよいですか?この記事ではjsでcssのスタイルを設定（変更）する方法を紹介します。困っている友人は参考にしていただければ幸いです。

JavaScriptを使用してCSSスタイルを設定する方法を紹介します。

1. スタイルを直接設定する (インライン スタイル)

JavaScript を使用して要素のスタイルを設定する最も簡単な方法は、スタイル属性。 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) 線 (background-color) は属性名を表します

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

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

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

2. グローバル スタイルを追加します

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

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

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

次に、innerHTML を通じてスタイルを c9ccee2e6ea535a969eb3f532ad9fe89 に追加します。

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()

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

.disableMenu {
    display: none;
}

HTML には、ID がdropDown のメニューがあります。

<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 クラスを削除するにはname の場合は、classList API の remove() メソッドを呼び出すことができます。

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

概要: 上記がこの記事の内容全体です。CSS スタイルを変更するには、さまざまな方法を選択できます。状況に応じて。皆さんの学習に役立つことを願っています: JavaScript チュートリアル ! 関連するビデオ チュートリアルをさらにお勧めします。

以上がjsでcssスタイルを設定するにはどうすればよいですか? jsでCSSスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。