JavaScript如何引用css-前端問答-PHP中文網

JavaScript如何引用css

WBOY

發布： 2023-05-29 16:46:37

原創

2146 人瀏覽過

JavaScript是一種廣泛應用於Web開發中的程式語言，它可以被用來為網頁添加互動效果和動態功能。在Web開發中，CSS也是至關重要的一環，用來定義網頁的樣式和版面。那麼，如何在JavaScript中引用CSS呢？本文將會詳細介紹。

在HTML中，使用標籤來引用CSS文件，如下所示：

<head>
  <link rel="stylesheet" href="style.css">
</head>

登入後複製

在JavaScript中，我們可以透過以下幾種方法來引用CSS文件：

1. 使用DOM操作引入CSS檔案

DOM(Document Object Model)是一種將HTML文件解析成物件的程式設計介面。使用DOM操作可以讓我們在JavaScript中動態地建立、刪除、修改HTML元素。在JavaScript中使用DOM操作也可以實現引入CSS檔案的功能，具體做法如下：

function loadCSS(url) {
  var link = document.createElement("link");
  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = url;
  document.getElementsByTagName("head")[0].appendChild(link);
}
loadCSS("style.css");

登入後複製

以上程式碼中的loadCSS函數會動態建立一個標籤，將href屬性設定為指向CSS文件的路徑，然後將其新增至標籤中。

2. 使用JavaScript改變HTML元素的class屬性

在HTML中，我們可以使用class屬性為元素新增樣式，CSS樣式表中則可以透過選擇器選取指定的class來為元素添加樣式。在JavaScript中，我們可以透過改變HTML元素的class屬性來改變元素的樣式。因此，我們可以利用這一點來動態引用CSS檔案。

function loadCSS(url) {
  var link = document.createElement("link");
  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = url;
  document.getElementsByTagName("head")[0].appendChild(link);
}
loadCSS("style.css");

// 获取需要添加样式的元素
var element = document.getElementById("example");

// 改变元素的class属性
element.className = "example-class";

登入後複製

在以上程式碼中，我們使用loadCSS函數引入CSS文件，然後透過getElementById方法取得需要添加樣式的元素，接著修改元素的class屬性。 CSS樣式表中則可以根據example-class選擇器來為該元素新增樣式。

3. 使用JavaScript改變CSS樣式

除了改變HTML元素的class屬性之外，我們還可以直接使用JavaScript修改CSS樣式。具體做法如下：

function loadCSS(url) {
  var link = document.createElement("link");
  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = url;
  document.getElementsByTagName("head")[0].appendChild(link);
}
loadCSS("style.css");

// 获取需要添加样式的元素
var element = document.getElementById("example");

// 修改元素的CSS样式
element.style.color = "red";
element.style.backgroundColor = "green";

登入後複製

以上程式碼中，我們同樣是先引入CSS文件，然後使用getElementById方法取得需要添加樣式的元素，接著直接使用element.style的方式來修改元素的CSS樣式。