JavaScriptで要素の属性を変更する方法

要素の属性を変更するための JS メソッド: 1. 「Element Object.setAttribute('Attribute','Attribute Value')」ステートメントを使用します。 2. 「Element Object.style.Attribute Name='Attribute Value」を使用します。 ' " ステートメント; 3. "element object.style.cssText='属性名: 属性値;'" ステートメントを使用します。

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

要素の属性を変更するための JavaScript

方法 1: setAttribute()

を使用する

setAttribute() メソッドは、指定された属性を追加し、指定された値を割り当てます。この指定されたプロパティがすでに存在する場合、値は設定/変更されるだけです。

構文: Element object.setAttribute('属性','属性値');

例:

<div>hello</div> 
<div id="box">欢迎来到PHP中文网！</div> 
<script type="text/javascript">
	var box=document.getElementById("box");
	box.setAttribute(&#39;style&#39;,&#39;color:red;border:1px solid #008000&#39;);
	// 给box元素设置的是行内样式
</script>

レンダリング:

方法 2: 要素ノードのスタイル オブジェクトを介して直接変更します。

# 構文: element Object.style.Attribute name='attribute value';

例:

<div>hello</div> 
<div id="box">欢迎来到PHP中文网！</div> 
<script type="text/javascript">
	var box=document.getElementById("box");
	box.style.color=&#39;#fff&#39;;
	box.style.backgroundColor=&#39;#ff6c8c&#39;;
	box.style.padding=&#39;10px&#39;;
</script>

レンダリング:

方法 3: cssText 属性を使用する

構文:Element object.style.cssText='属性名:属性値;';

例:

<div>hello</div> 
<div id="box">欢迎来到PHP中文网！</div> 
<script type="text/javascript">
	var box=document.getElementById("box");
	box.style.cssText=&#39;color:#fff;background-color:#ffaa00;padding:10px;&#39;;
</script>

レンダリング:

[推奨学習: JavaScript 上級チュートリアル]

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