ホームページ >ウェブフロントエンド >jsチュートリアル >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('style','color:red;border:1px solid #008000'); // 给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='#fff'; box.style.backgroundColor='#ff6c8c'; box.style.padding='10px'; </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='color:#fff;background-color:#ffaa00;padding:10px;'; </script>
レンダリング:
[推奨学習: JavaScript 上級チュートリアル]
以上がJavaScriptで要素の属性を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。