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

Aタグのhrefの有効無効を切り替えるにはAタグオブジェクトの「setAttribute」で属性を変更します。

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

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://lightgauge.net" ) ;
                }
                else{
                    obj_link.disabled = true ;
                    obj_button.value = "このボタンをクリックすると上のリンクが復活します。" ;
                    obj_link.removeAttribute( "href" ) ;
                }
            }
        </SCRIPT>
    </HEAD>
    <BODY>
        <a href="https://lightgauge.net" id="testLink">リンク</a><BR>
        <BUTTON type="submit" onClick="changeHref();" name="myButton">このボタンをクリックすると上のリンクが消えます。</BUTTON>
    </BODY>
<HTML>

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

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

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

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

obj_link.removeAttribute( "href" ) ;

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

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

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

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

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