js 如何引入外部 css

JavaScript引入外部CSS的方法主要包括动态创建标签、使用import指令和利用document.write()。每种方法都有其特点和适用场景，但其中动态创建标签被广泛应用于需要根据不同情况动态改变样式或按需加载CSS的场景中。

一、动态创建`<link>`标签

动态创建<link>标签是一种简便且高效的引入外部CSS的方法。这种方法通过JavaScript直接操作DOM，创建一个新的link元素，并设置其rel和href属性指向外部CSS文件的路径，最后将这个link元素添加到document的head中。

创建<link>元素

首先，通过JavaScript的document.createElement()方法创建一个新的link元素。

var link = document.createElement('link');

设置<link>元素属性

接下来，通过设置link元素的rel属性为stylesheet，将其定义为样式表，并通过href属性指定外部CSS文件的路径。

link.rel = 'stylesheet';
link.href = 'https://example.com/style.css';

将<link>元素添加到head中

最后，通过document.getElementsByTagName('head')[0].appendChild(link);或document.head.appendChild(link);将这个link元素添加到document的head中，从而实现外部CSS的加载。

document.getElementsByTagName('head')[0].appendChild(link);

二、使用`@import`指令

在JavaScript中，通过@import指令同样可以引入外部CSS，但这种方法通常在CSS文件内使用更为常见。然而，借助于JavaScript动态创建的标签，也能实现通过@import引入外部CSS的效果。

创建并添加<style>元素

首先，动态创建一个<style>元素，并将其添加到文档的head中。

var style = document.createElement('style');
document.head.appendChild(style);

使用@import指令引入CSS

然后，通过style.sheet.insertRule()方法，将含有@import指令的规则添加到这个<style>元素中。

style.sheet.insertRule("@import url('https://example.com/style.css');", 0);

三、利用`document.write()`

document.write()是一个旧式且不推荐使用的方法，它可以直接向文档流中写入HTML字符串，包括<link>标签。

直接写入<link>标签

通过document.write()方法，直接将<link>标签的HTML字符串写入到文档中。

document.write('<link rel="stylesheet" href="https://example.com/style.css">');

注意

需要注意的是，document.write()如果在文档加载完成后使用，会导致整个页面的内容被重写，因此它的使用场景极其有限，且不推荐在现代Web开发中使用。

总结：虽然有多种方法可以实现JavaScript引入外部CSS，但动态创建<link>标签因其灵活性和高效性，成为了最为常见和推荐的实践方式。通过这种方式，可以根据不同的需求和场景，灵活地加载和更新页面的样式。

相关问答FAQs：

1. 如何在JavaScript中引入外部CSS文件？

CSS样式表是用于定义网页外观和布局的重要组成部分。您可以通过以下步骤在JavaScript中引入外部CSS文件：

首先，在HTML文件的元素内部，添加一个标签用于引入外部CSS文件。例如：
<link rel="stylesheet" type="text/css" href="styles.css">
其次，在JavaScript文件中，您可以通过获取文档的头部元素，然后创建一个元素，并将其添加到头部中。例如：
```
var cssLink = document.createElement("link");
cssLink.rel = "stylesheet";
cssLink.href = "styles.css";
document.head.appendChild(cssLink);
```
最后，确保将CSS文件（styles.css）与HTML文件和JavaScript文件放置在相同的目录中，或者使用正确的相对路径引用CSS文件。

2. JavaScript如何动态改变外部CSS的引用？

有时，您可能需要在JavaScript中根据特定条件改变引用的CSS文件。以下是一种方法来动态改变外部CSS文件的引用：

首先，在HTML文件的元素中，为元素指定一个id。例如：
<link rel="stylesheet" type="text/css" href="styles1.css" id="myStylesheet">
其次，在JavaScript文件中，您可以通过获取元素的引用，并使用setAttribute方法修改其href属性。例如：
```
var stylesheet = document.getElementById("myStylesheet");
stylesheet.setAttribute("href", "styles2.css");
```
最后，当JavaScript代码执行时，CSS文件的引用将更改为新指定的文件（styles2.css）。

3. JavaScript如何动态添加内联样式而不使用外部CSS文件？

除了通过外部CSS文件引入样式，您还可以在JavaScript中动态添加内联样式来改变元素的外观。以下是一种方法：

首先，获取要添加内联样式的元素的引用或创建新的元素。

其次，在JavaScript中，您可以使用元素的style属性来指定内联样式。例如：

var element = document.getElementById("myElement");
element.style.color = "red";
element.style.backgroundColor = "yellow";
element.style.fontSize = "20px";