ホームページ  >  記事  >  ウェブフロントエンド  >  jsで要素のCSSスタイルを設定する方法

jsで要素のCSSスタイルを設定する方法

青灯夜游
青灯夜游オリジナル
2021-04-29 17:38:345090ブラウズ

設定方法: 1. 「object.setAttribute('style', 'property: value')」ステートメントを使用します。 2. 「object.style.setProperty('property', 'value')」を使用します。 " ステートメント ;3. "Object.style.cssText='Property:Value'" ステートメントを使用します。

jsで要素のCSSスタイルを設定する方法

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

方法 1: setAttribute() を使用します

<p id="p">hello world<p>

<button onclick="myFunction()">点击按钮,设置css样式</button>

<script>
function myFunction() {
	document.getElementById("p").setAttribute(&#39;style&#39;, &#39;color:#FF0000&#39;);
}
</script>

レンダリング:

jsで要素のCSSスタイルを設定する方法

方法 2: setProperty() を使用します
#

<p id="p">hello world<p>

<button onclick="myFunction()">点击按钮,设置css样式</button>

<script>
function myFunction() {
	document.getElementById("p").style.setProperty(&#39;font-size&#39;, &#39;50px&#39;);
}
</script>

レンダリング:


jsで要素のCSSスタイルを設定する方法

方法 3: cssText 属性

<p id="p">hello world<p>

<button onclick="myFunction()">点击按钮,设置css样式</button>

<script>
function myFunction() {
	document.getElementById("p").style.cssText=&#39;font-size:50px;color: red;&#39;;
}
</script>
レンダリング:


##[推奨学習: jsで要素のCSSスタイルを設定する方法JavaScript 上級チュートリアル

]

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

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