อ็อบเจกต์ Link ใน HTML DOM

อ็อบเจกต์ Link แทนอีลีเมนต์ <link> ใน HTML DOM ใช้สำหรับลิงก์ทรัพยากรภายนอก (CSS, icons, ฯลฯ)

ไวยากรณ์ (Syntax)

var linkObject = document.createElement("LINK")

คุณสมบัติ

ตัวอย่างการใช้งาน (คุณสมบัติ disabled)

ตัวอย่างด้านล่างปิดใช้งาน stylesheet ผ่าน JavaScript:

<!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": หน้าตา normal ตาม style.css

หลังคลิกปุ่ม "Disable Styling": Stylesheet ถูกปิดใช้งาน หน้าตาเปลี่ยนเป็น default browser style

หมายเหตุ: รูปภาพตัวอย่างจากต้นฉบับไม่ได้รวมอยู่ในเนื้อหานี้