Vì câu hỏi này đã được hiển thị trong stackoverflow vào năm 2019, tôi muốn thêm đóng góp của mình bằng cách sử dụng JavaScript hiện đại hơn.
Cụ thể, đối với Biểu định kiểu CSS không nội tuyến - vì bằng cách nào đó đã được đề cập trong câu hỏi ban đầu.
Trước hết, hãy lưu ý rằng chúng ta vẫn chưa có Đối tượng biểu định kiểu có thể cấu trúc. Tuy nhiên, chúng tôi hy vọng họ sẽ sớm hạ cánh.
Trong khi chờ đợi, giả sử nội dung HTML sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link id="theme" rel="stylesheet" type="text/css" href="./index.css" />
<script src="./index.js"></script>
</head>
<body>
<p>Hello World</p>
<button onclick="reload('theme')">Reload</button>
</body>
</html>
Chúng tôi có thể có, trong index.js:
const load = target =>
new Promise((rs, rj) => {
target.addEventListener("load", rs, { once: true });
target.addEventListener(
"error",
rj.bind(null, `Can't load ${target.href}`),
{ once: true }
);
});
async function reload(id) {
const link = document.getElementById(id);
if (!link || !link.href) {
throw new Error(`Can't reload '${id}', element or href attribute missing.`);
}
let response = await fetch(link.href, { cache: "reload" });
let url = await URL.createObjectURL(await response.blob());
let updated = document.querySelector(`[data-link-id=${id}]`);
if (!updated) {
updated = document.createElement("link");
updated.rel = "stylesheet";
updated.type = "text/css";
updated.dataset.linkId = id;
link.parentElement.insertBefore(updated, link);
link.disabled = true;
}
updated.href = url;
await load(updated);
URL.revokeObjectURL(url);
}
