Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng liên kết HTML DOM

Đối tượng liên kết DOM DOM trong HTML đại diện cho phần tử.

Cú pháp

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

Tạo phần tử

var linkObject = document.createElement(“LINK”)

thuộc tính

Đây, “LinkObject” có thể có các thuộc tính sau -

Kích thước
Thuộc tính Mô tả
crossOrigin Nó đặt / trả về cài đặt CORS của tài liệu được liên kết
bị vô hiệu hóa Nó đặt / trả về việc tài liệu được liên kết có bị vô hiệu hóa hay không
href Nó đặt / trả về URL của tài liệu được liên kết
hreflang Nó đặt / trả lại mã ngôn ngữ của tài liệu được liên kết
media Nó đặt / trả về loại phương tiện cho thẻ phần tử liên kết
rel Nó thiết lập / trả về mối quan hệ giữa tài liệu hiện tại và tài liệu được liên kết
Nó trả về giá trị của thuộc tính kích thước của tài liệu được liên kết
loại Nó đặt / trả về kiểu nội dung 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ề Liên kết bị vô hiệu hóa tài sản -

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

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

Đầu ra

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

Trước khi nhấp vào ‘Tắt tạo kiểu’ nút -

Đối tượng liên kết HTML DOM

Sau khi nhấp vào ‘Tắt tạo kiểu’ nút -

Đối tượng liên kết HTML DOM