HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのLink hrefプロパティとは？構文と使い方を実例付きで解説

HTML DOMのLink hrefプロパティは、リンクされたドキュメント（外部スタイルシートなど）のパスやURLを取得・設定するためのプロパティです。JavaScriptから動的にスタイルシートを切り替えたい場合などに活用できます。

構文

hrefプロパティの基本的な構文は以下のとおりです。

値の取得

linkObject.href

<link>要素に設定されている現在のhref属性の値を文字列として返します。

値の設定

linkObject.href = 文字列

指定した文字列を新しいリンク先として設定します。

設定できる値

hrefプロパティに設定できる「文字列」は以下の2種類です。

値説明
pathドキュメントへの絶対パスまたは相対パスを指定します。
urlリンク先ドキュメントのURLアドレスを指定します。

サンプルコード

ここでは、ボタンをクリックすると外部スタイルシートが別のCSSファイルに切り替わる例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Link href</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-href</legend>
<label for="WeekSelect">Sales Target Week:
<input type="week" id="WeekSelect" value="2020-W13" disabled>
</label>
<input type="button" onclick="enableWeekInput()" value="Change Sales Target Week">
<input type="button" onclick="changeStyle()" value="Change Style">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    var extStyle = document.getElementById("extStyle");
    divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
    function enableWeekInput() {
        inputWeek.disabled = false;
        divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
    }
    function changeStyle(){
        extStyle.href = 'anotherStyle.css';
    }
</script>
</body>
</html>

この例では、id属性が「extStyle」の<link>要素に対して、changeStyle()関数内でextStyle.href = 'anotherStyle.css'を実行することで、読み込むスタイルシートを動的に変更しています。

style.css の内容

初期状態で読み込まれる「style.css」は以下のとおりです。

form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}

anotherStyle.css の内容

切り替え後の「anotherStyle.css」では、フォームに背景色と文字色が追加されています。

form {
    width:70%;
    margin: 0 auto;
    text-align: center;
    background-color: rgba(0,0,0,0.7);
    color: white;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}

実行結果

このコードを実行すると、以下のような表示になります。

「Change Style」ボタンをクリックする前：

HTML DOMのLink hrefプロパティとは？構文と使い方を実例付きで解説

「Change Style」ボタンをクリックした後：

HTML DOMのLink hrefプロパティとは？構文と使い方を実例付きで解説

ボタンをクリックするとhrefプロパティが書き換わり、ページ全体のスタイルが即座に別のデザインへと変化することが確認できます。このように、Link hrefプロパティを使えばJavaScriptだけでテーマの切り替えなどを実現できます。

  1. HTML DOMのLocation hrefプロパティとは？URLの取得と設定方法を解説

    HTML DOM の Location href プロパティは、現在のドキュメントの URL に対応する文字列を取得または設定します。値を読み取ればページの完全な URL を確認でき、新しい値を代入すればその URL へページを遷移させることも可能です。 構文 以下に構文を示します − href プロパティの値を取得する場合 location.href href プロパティに値を設定する場合 location.href = href 例 Location href プロパティの具体的な使用例を見てみましょう − <!DOCTYPE html> <html> <he

  2. HTML DOMのBase hrefプロパティとは？基本構文と実装例をわかりやすく解説

    HTML DOMのBase hrefプロパティは、HTMLの<base>タグに関連付けられたプロパティです。<base>タグは、現在のHTMLドキュメント内にあるすべての相対URLに対して基準となるベースURLを指定するために使用されます。なお、1つのHTMLドキュメント内に配置できる<base>タグは最大で1つまでという制限があります。Base hrefプロパティを使用すると、base要素のhref属性値を取得したり、新しいURLを設定したりすることができます。構文Base hrefプロパティの構文は以下の通りです。hrefプロパティに値を設定する場合ba