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

HTML DOMLinkhrefプロパティ

HTML DOM Link hrefプロパティは、リンクされたドキュメントのパス/URLを設定/返します。 −

構文

以下は構文です-

  • hrefを返す 属性値
linkObject.href
  • hrefの設定 文字列に
linkObject.href = string

ブール値

ここで、「文字列」は次のようになります-

booleanValue
詳細
パス
ドキュメントへの絶対パス/相対パスを定義します。
url
リンクするドキュメントのURLアドレスを定義します。

例

Link hrefの例を見てみましょう プロパティ-

<!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>

上記の例では、「style.css」 含む-

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

上記の例では、「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;
}

出力

これにより、次の出力が生成されます-

[スタイルの変更]をクリックする前に ボタン-

HTML DOMLinkhrefプロパティ

[スタイルの変更]をクリックした後 ボタン-

HTML DOMLinkhrefプロパティ


  1. HTMLDOMの場所hrefプロパティ

    HTML DOM Location hrefプロパティは、URLパスに対応する文字列を返す/設定します。 構文 以下は構文です- hrefの戻り値 プロパティ location.href hrefの値 プロパティセット location.href = href 例 Location hrefの例を見てみましょう プロパティ- <!DOCTYPE html> <html> <head> <title>Location href</title> <style>    form { &n

  2. HTML DOMBasehrefプロパティ

    HTML DOM Base hrefプロパティは、HTMLタグに関連付けられています。 タグは、現在のHTMLドキュメント内のすべての相対URLのベースURLを指定するために使用されます。 HTMLドキュメントには最大1つのタグを含めることができます。 Base hrefプロパティは、base要素のhref属性の値を返します。 構文 以下は、-の構文です。 hrefプロパティの設定- baseObject.href = URL ここで、URLはベースURLです。 hrefプロパティを返す- baseObject.href 例 BasehrefPropertyの例を見てみましょう- &