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

HTML DOM Link typeプロパティとは？構文と実例で解説

HTML DOMのLink typeプロパティは、<link>要素でリンクされたドキュメントのMIMEタイプ（type属性）を取得・設定するためのプロパティです。スタイルシートやスクリプトなど、外部リソースの種類を指定する際に使用されます。

構文

Link typeプロパティの基本的な構文は以下の通りです。

type属性の値を取得する場合

linkObject.type

type属性に値を設定する場合

linkObject.type = value

注意： type属性には「text/javascript」「text/css」「image/gif」などの有効なMIMEタイプを指定します。

使用例

ここでは、Link typeプロパティを使った具体的なサンプルコードを紹介します。この例では、誤ったtype属性値を持つ外部スタイルシートを、ボタンクリック時に正しい値へ修正します。

<!DOCTYPE html>
<html>
<head>
<title>Link type</title>
<link id="extStyle" rel="stylesheet" href="style.css" type="myStyle">
</head>
<body>
<form>
<fieldset>
<legend>Link-type</legend>
<input type="button" value="Correct Type" onclick="correctType()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var extStyle = document.getElementById("extStyle");
    divDisplay.textContent = 'The linked document type: '+extStyle.type+' is not compatible';
    function correctType(){
        extStyle.type = 'text/css';
        divDisplay.textContent = 'Congrats! The linked document type: '+extStyle.type+' is compatible';
    }
</script>
</body>
</html>

上記の例で読み込んでいる「style.css」の中身は以下の通りです。

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

実行結果

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

「Correct Type」ボタンをクリックする前

ページ読み込み時点では、type属性が無効な値「myStyle」になっているため、「リンクされたドキュメントタイプ：myStyle は互換性がありません」というメッセージが表示され、スタイルも適用されません。

HTML DOM Link typeプロパティとは？構文と実例で解説

「Correct Type」ボタンをクリックした後

ボタンをクリックすると、JavaScriptによってtype属性が正しい値「text/css」に変更され、「おめでとうございます！リンクされたドキュメントタイプ：text/css は互換性があります」というメッセージが表示され、CSSが適用されてデザインが反映されます。

HTML DOM Link typeプロパティとは？構文と実例で解説

まとめ

Link typeプロパティを使用することで、JavaScriptから動的に<link>要素のtype属性を読み取ったり修正したりできます。誤ったMIMEタイプが指定されている外部リソースを、ユーザーの操作に応じて適切な値に更新したい場合などに活用できる便利なプロパティです。

  1. HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種