(cache)<A>タグのhrefをJavascriptで動的に有効／無効を切り替える。

HTML-AタグのhrefをJavascriptで動的に有効／無効を切り替える。

投稿日：2012/08/07 更新日：2018/02/20

Aタグのhrefの有効無効を切り替える

画面の選択状態によってAタグのhrefを動的に有効／無効を切り替える必要があったので作って見ました。

HTMLのソース

以下は作成したHTMLのソースです。

<!DOCTYPE html> <HTML>  <HEAD>  <SCRIPT>  function changeHref()  {  var obj_link = document.getElementById( "testLink" ) ;  var obj_button = document.getElementById( "myButton" ) ;  if( obj_link.disabled == true ){  obj_link.disabled = false;  obj_button.value = "このボタンをクリックすると上のリンクが消えます。" ;  obj_link.setAttribute( "href", "https://www.lightgauge.net" ) ;  }  else{  obj_link.disabled = true ;  obj_button.value = "このボタンをクリックすると上のリンクが復活します。" ;  obj_link.removeAttribute( "href" ) ;  }  }  </SCRIPT>  </HEAD>  <BODY>  <a href="https://www.lightgauge.net" id="testLink">リンク</a><BR>  <BUTTON type="submit" onClick="changeHref();" name="myButton">このボタンをクリックすると上のリンクが消えます。</BUTTON>  </BODY> <HTML>

<!DOCTYPE html>

<HTML>

<HEAD>

function changeHref()

{

var obj_link = document.getElementById( "testLink" ) ;

var obj_button = document.getElementById( "myButton" ) ;

if( obj_link.disabled == true ){

obj_link.disabled = false;

obj_button.value = "このボタンをクリックすると上のリンクが消えます。" ;

obj_link.setAttribute( "href", "https://www.lightgauge.net" ) ;

}

else{

obj_link.disabled = true ;

obj_button.value = "このボタンをクリックすると上のリンクが復活します。" ;

obj_link.removeAttribute( "href" ) ;

}

</SCRIPT>

</HEAD>

<BODY>

<BUTTON type="submit" onClick="changeHref();" name="myButton">このボタンをクリックすると上のリンクが消えます。</BUTTON>

</BODY>

<HTML>

オブジェクトの属性を無効にするremoveAttribute()

有効になっているhrefを無効にするにはremoveAttribute()メソッドを利用します。

このメソッドの引数は無効にしたい属性名です。

今回の場合はherfを無効にしたいので、removeAttribute()メソッドに「"href"」を渡します。

obj_link.removeAttribute( "href" ) ;

1	obj_link.removeAttribute( "href" ) ;

オブジェクトの属性を有効にするsetAttribute()

removeAttribute()とは逆に属性を有効にするには、setAttribute()に有効にしたい属性とその値を再度設定する必要があります。

obj_link.setAttribute( "href", "https://www.lightgauge.net" ) ;

1	obj_link.setAttribute( "href", "https://www.lightgauge.net" ) ;

今回の場合は「href」を設定し、その参照先のURLを渡しています。

コード的には短いがここに至るまでは結構苦労しました。