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

HTML DOMのLink disabledプロパティとは？使い方とサンプルコードを解説

HTML DOMのLink disabledプロパティは、<link>要素が有効か無効かを取得・設定するためのプロパティです。外部スタイルシートの読み込みをJavaScriptから動的に制御したい場合などに活用できます。

構文

disabledプロパティの構文は以下の通りです。

boolean値（true/false）を取得する場合

linkObject.disabled

disabledにboolean値を設定する場合

linkObject.disabled = booleanValue

Boolean値の一覧

「booleanValue」には以下の値を指定できます。

booleanValue説明
true<link>要素が無効（disabled）であることを示します。
false<link>要素が無効化されていないことを示します。これがデフォルト値です。

サンプルコード

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 disabledプロパティとは？使い方とサンプルコードを解説

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

HTML DOMのLink disabledプロパティとは？使い方とサンプルコードを解説

ボタンをクリックしてextStyle.disabled = true;が実行されると、<link>要素が無効化されるため、外部スタイルシートが適用されなくなり、ページの見た目が変化します。このように、Link disabledプロパティを使えば、スタイルシートの適用・解除を動的に切り替えることが可能です。

  1. 【HTML DOM】fieldset要素のdisabledプロパティの使い方とサンプルコード

    fieldsetのdisabledプロパティとはHTML DOMのfieldset要素が持つdisabledプロパティは、そのfieldset内に含まれるフォーム部品をまとめて無効化するためのプロパティです。trueを設定すれば配下の要素がすべて無効になり、falseを設定すれば有効になります（初期状態は有効）。無効化された要素は多くのブラウザでグレー表示となり、ユーザーはクリックや文字入力を行えません。基本構文disabledプロパティに値を設定する場合は次のように記述します。fieldsetObj.disabled = true|false現在の設定値を取得する場合は以下のとおりです。fi

  2. HTML DOM Textarea disabledプロパティの使い方とサンプルコード

    HTML DOM の Textarea disabled プロパティは、HTML ドキュメント内の textarea 要素が無効（disabled）状態かどうかを取得したり、設定したりするためのプロパティです。ユーザーの操作状況に応じてフォームの入力欄を一時的に使用不可にしたい場合などに活用できます。 構文 disabled プロパティの基本的な構文は以下の通りです。 1. disabled の値を取得する場合 object.disabled 2. disabled の値を設定する場合 object.disabled = true | false true を指定するとテキストエリアが無効化さ