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

HTML DOM Linkオブジェクトとは？基本構文とプロパティを解説

HTML DOM の Link オブジェクトは、HTML 内の <link> 要素を表します。<link> 要素は主に外部スタイルシートやアイコンなど、現在のドキュメントと外部リソースとの関連付けに使用されます。

構文

<link> 要素を表す Link オブジェクトは、JavaScript を使って次のように動的に作成できます。

<link> 要素の作成例：

var linkObject = document.createElement("LINK")

Linkオブジェクトの主なプロパティ

Link オブジェクトでは、以下のプロパティを使用して、リンク先ドキュメントに関する情報の設定や取得が行えます。

プロパティ説明
crossOriginリンク先ドキュメントの CORS（オリジン間リソース共有）設定を設定・取得します。
disabledリンク先のスタイルシートが無効化されているかどうかを設定・取得します。
hrefリンク先ドキュメントの URL を設定・取得します。
hreflangリンク先ドキュメントの言語コードを設定・取得します。
medialink 要素に適用されるメディアタイプを設定・取得します。
rel現在のドキュメントとリンク先ドキュメントとの関係性を設定・取得します。
sizesリンク先ドキュメントの sizes 属性の値を返します。
typeリンク先ドキュメントのコンテンツタイプを設定・取得します。

実装例：disabled プロパティの使い方

ここでは、Link オブジェクトの disabled プロパティを使ったサンプルコードを紹介します。この例では、ボタンのクリックによって外部スタイルシートの適用を切り替えます。

<!DOCTYPE html>
<html>
<head>
<title>Link Disabled</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-disabled</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="beautify()" value="Disable Styling">
<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 beautify(){
        extStyle.disabled = true;
    }
</script>
</body>
</html>

上記のコードで読み込んでいる外部スタイルシート style.css の内容は以下の通りです。

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

実行結果

このコードを実行すると、以下のような出力が得られます。

「Disable Styling」ボタンをクリックする前の表示：

HTML DOM Linkオブジェクトとは？基本構文とプロパティを解説

「Disable Styling」ボタンをクリックした後の表示：

HTML DOM Linkオブジェクトとは？基本構文とプロパティを解説

ボタンをクリックすると、disabled プロパティが true に設定され、外部スタイルシート style.css のスタイルが無効化されることが確認できます。このように Link オブジェクトの disabled プロパティを利用すれば、JavaScript から動的にスタイルの適用・解除を制御することが可能です。

  1. HTML DOM Textareaオブジェクトとは？作成方法からプロパティ・メソッドまで徹底解説

    HTML DOM の Textarea オブジェクトは、HTMLドキュメント内の <textarea> 要素を JavaScript から操作するためのインターフェースです。このオブジェクトを使うことで、複数行テキスト入力欄の値の取得・変更や、表示サイズの調整などが動的に行えます。 Textareaオブジェクトの作成方法 新しい Textarea オブジェクトを作成するには、document.createElement() メソッドを使用します。 構文 document.createElement(TEXTAREA); この構文を実行すると、まだページには追加されていない新しい t

  2. HTML DOM Titleオブジェクトとは？textプロパティの使い方をわかりやすく解説

    HTML DOM Titleオブジェクトの概要HTML DOM の Title オブジェクトは、HTML ドキュメント内の <title> 要素を表すオブジェクトです。このオブジェクトを利用することで、JavaScript からページのタイトルを動的に取得したり変更したりすることが可能になります。<title> 要素の作成方法新しい <title> 要素を作成するには、document.createElement() メソッドを使用します。var titleObject = document.createElement(TITLE)ここで作成した「title