โหลดไฟล์ CSS ด้วย JavaScript

โหลดไฟล์ CSS ด้วย JavaScript บทความนี้สอนวิธีการโหลดไฟล์ CSS ลงในเว็บไซต์โดยใช้คำสั่งของ JavaScript โดยการสร้าง element link และแทรกลงในแท็ก head ของเว็บไซต์ ด้วย appendChild สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง โหลดไฟล์ CSS ด้วย JavaScript

<script>
    var tags_header = document.getElementsByTagName('head')[0];
    var tags_link_css = document.createElement('link');
    tags_link_css.rel = 'stylesheet';
    tags_link_css.type = 'text/css';
    tags_link_css.href = 'demo.css';
    tags_header.appendChild(tags_link_css);
</script>

ผลลัพธ์

<link rel="stylesheet" type="text/css" href="demo.css">

โหลดไฟล์ CSS ด้วย JavaScript จากตัวอย่างโค้ดมีลำดับขั้นตอนดังนี้

1. อ้างถึงแท็ก head ของเว็บไซต์ด้วย getElementsByTagName('HEAD')[0] เก็บค่าไว้ที่ตัวแปร tags_header

2. สร้างแท็ก link ด้วยคำสั่ง createElement เก็บไว้ที่ตัวแปร tags_link_css

3. กำหนด attribute เพิ่มเติมให้กับ tags_link_css คือ rel="stylesheet" และ type="text/css" และสุดท้ายชื่อไฟล์ href="demo.css"

4. นำแท็ก link ที่สร้างไปเพิ่มในแท็ก head ของเว็บไซต์ด้วยคำสั่ง appendChild