当前位置：首页 > news >正文

如何通过js加载css和html

news 2025/5/9 16:55:07

通过JavaScript动态加载CSS和HTML是一种常见的做法，特别是在需要按需加载资源或根据用户操作动态改变页面样式和内容的情况下。以下是几种实现方式：

动态加载CSS

方法一：创建`<link>`标签

这是最常见的方式之一，通过创建一个新的<link>元素并将其添加到文档的<head>部分来加载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("path/to/your/style.css");

方法二：使用`fetch` API

如果你需要在加载CSS后执行某些操作，可以使用fetch API来获取CSS内容，然后通过创建<style>标签将其插入到文档中。

async function loadCSS(url) {const response = await fetch(url);const css = await response.text();const style = document.createElement("style");style.textContent = css;document.head.appendChild(style);
}// 调用函数
loadCSS("path/to/your/style.css");

动态加载HTML

方法一：使用`fetch` API

fetch API 是一种现代的方法，可以用来从服务器请求HTML内容并将其插入到页面中。

async function loadHTML(url, targetElementId) {const response = await fetch(url);const html = await response.text();document.getElementById(targetElementId).innerHTML = html;
}// 调用函数
loadHTML("path/to/your/template.html", "targetElement");

方法二：使用`XMLHttpRequest`

虽然fetch API 更现代且功能更强大，但如果你需要支持一些较旧的浏览器，可以使用XMLHttpRequest。

function loadHTML(url, targetElementId) {var xhr = new XMLHttpRequest();xhr.open("GET", url, true);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById(targetElementId).innerHTML = xhr.responseText;}};xhr.send();
}// 调用函数
loadHTML("path/to/your/template.html", "targetElement");