【Javascript】DOM Samples /Core　Node/attributes

この文字をクリックするとid名を表示します

<p id="abc" 
   onclick="alert(this.attributes.getNamedItem('id').nodeValue)"
>この文字をクリックするとid名を表示します</p>

<script type="text/javascript">
<!--

function removeTitle(idName)
{
  //1 id名がidNameのエレメントを変数img2へ入れる
  img2 = document.getElementById(idName)

  //2 width属性をimg2のマップから取り除く
  img2.attributes.removeNamedItem("title")
}

function setTitle(idName,titleText)
{
  //1 id名がidNameのエレメントを変数img2へ入れる
  img2 = document.getElementById(idName)

  //2 titleと言う名前の属性を生成し変数attriへ入れる
  attri = document.createAttribute("title")

  //3 title属性をimg2のマップにセットする
  img2.attributes.setNamedItem(attri)

  //4 セットされたtitle属性に値を書き込む
  img2.setAttribute("title",titleText)
}

//-->
</script>
<br>
<img   id      = "sample2"
       title   = "これはコーヒーカップです"
       src     = "//img.allabout.co.jp/gm/article/24075/cup.jpg">
<form>
<input type    = "button"  
       value   = "画像のtitleを除去"
       onclick = "removeTitle('sample2')"><br>
<input type    = "button"  
       value   = "titleをセット「ティーカップでもあるよ」"
       onclick = "setTitle('sample2','ティーカップでもあるよ')"><br>
<input type    = "button"  
       value   = "titleをセット「これは実は子供のおもちゃだったりもします」"
       onclick = "setTitle('sample2','これは実は子供のおもちゃだったりもします')">
</form>