element.getAttribute( attributeName )は、「element」に指定した要素から、引数「attributeName」に指定した属性名の属性の値を取得するメソッド。
構文
var $attribute = $elementNodeReference.getAttribute( attributeName );
引数
- attributeName
- 属性名を指定。
戻り値
引数「attributeName」に指定した属性名の属性の値。
サンプル
サンプルの動作について
「クラス属性値を取得」ボタンをクリックすると、ボタン群の右横に「クラス属性値：sampleClass」と表示する。
「スタイル属性値を取得」ボタンをクリックすると、ボタン群の右横に「スタイル属性値：margin-left: 10px;」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sample( $attributeName, $text ) {
var $sample = document.getElementById( "sample" );
var $attribute = $sample.getAttribute( $attributeName );
$sample.innerHTML = $text + $attribute;
}
</script>
function sample( $attributeName, $text ) {
var $sample = document.getElementById( "sample" );
var $attribute = $sample.getAttribute( $attributeName );
$sample.innerHTML = $text + $attribute;
}
</script>
HTML
<p>
<button onclick="sample( 'class', 'クラス属性値：' );">クラス属性値を取得</button>
<button onclick="sample( 'style', 'スタイル属性値：' );">スタイル属性値を取得</button>
<span id="sample" class="sampleClass" style="margin-left: 10px;"></span>
</p>
<button onclick="sample( 'class', 'クラス属性値：' );">クラス属性値を取得</button>
<button onclick="sample( 'style', 'スタイル属性値：' );">スタイル属性値を取得</button>
<span id="sample" class="sampleClass" style="margin-left: 10px;"></span>
</p>