目录结构:
html/index.html
html/css/css.css
html/css/img/avatar.png
css.css的内容:
body {
background-image: url("./img/avatar.png");
}
如果在 index.html 中使用“link”标签包含 css.css 文件，则它工作正常并且 avatar.png 显示为页面背景:
<link rel="STYLESHEET" type="text/css" href="./css/css.css">
但是，如果使用 JavaScript 代码来包含 css.css 文件，则控制台会显示错误:
function load_css(){
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.readyState === 4)
if (xhr.status === 200) {
var oNew = document.createElement('style');
oNew.rel = 'STYLESHEET';
oNew.type = 'text/css';
oNew.textContent = xhr.responseText;
document.getElementsByTagName("head")[0].appendChild(oNew);
}
}
xhr.open("GET", './css/css.css', false);
xhr.send(null);
}
load_css();
控制台:
GET http://localhost/html/img/avatar.png 404 (Not Found)
它不适用于所有浏览器。
看起来，当使用上述方法以编程方式包含 CSS 文件时，该 CSS 中的相对链接将变得相对于包含它们的 HTML 文件而不是包含它们的 CSS 文件。
有什么补救建议吗？
最佳答案
你为什么要使用同步 XMLHttpRequest将 CSS 注入(inject) <style>元素？您可以创建一个新的 <link>并将其附加到 <head>这应该可以解决您的问题。它还可以跨域工作，并得到过去十年中制造的所有浏览器的支持。
function load_css(url) {
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
}
然后像这样加载你的 CSS:
load_css('/css/css.css');
关于javascript - 从 JavaScript 中以编程方式包含 CSS 页面会破坏样式化图像 url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21511302/