Thuộc tính href liên kết DOM HTML

Thuộc tính HTML DOM Link href đặt / trả về đường dẫn / url của tài liệu được liên kết. -

Cú pháp

Sau đây là cú pháp -

Trả lại href giá trị thuộc tính

linkObject.href

Đặt href thành một chuỗi

linkObject.href = string

Giá trị Boolean

Ở đây, “chuỗi” có thể là như sau -

booleanValue	Chi tiết
đường dẫn	Nó xác định đường dẫn tuyệt đối / tương đối đến tài liệu.
url	Nó xác định địa chỉ url của tài liệu được liên kết.

Ví dụ

Hãy để chúng tôi xem một ví dụ về Link href tài sản -

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

Trong ví dụ trên ‘style.css’ chứa -

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

Trong ví dụ trên ‘anotherStyle.css’ chứa -

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;
}

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Trước khi nhấp vào ‘Thay đổi kiểu’ nút -

Thuộc tính href liên kết DOM HTML

Sau khi nhấp vào ‘Thay đổi kiểu’ nút -

Thuộc tính href liên kết DOM HTML