我有一个链接的 css 文件用于默认属性,第二个链接文件用于显示窗口更改时它会更改的消息。在 JS 脚本的末尾,我将一个元素的 offsetWidth 放在全局值 NavW 中。所以 JS 似乎返回了错误的值,它不仅仅在 dom 中计算,而是基于第一个默认的 css 属性而不是新的。但是,目标元素呈现正确。请注意,条件中的值“2”是因为有一个 Link 元素,它不是一个 css 文件,而是一个图标。
function switchTheme(newHref)
{
var newIndex;
newIndex = document.getElementsByTagName("link").length;
var newTheme = document.createElement("link");
newTheme.setAttribute("rel", "stylesheet");
newTheme.setAttribute("type", "text/css");
newTheme.setAttribute("href", newHref);
if ( newIndex == 2 )
{
document.getElementsByTagName("head").item(newIndex - 2).appendChild(newTheme);
}
else if ( newIndex > 2 )
{
var themeToReplace = document.getElementsByTagName("link").item(2);
document.getElementsByTagName("head").item(0).replaceChild(newTheme, themeToReplace);
}
NavW = document.getElementById("wrap").offsetWidth;
}
最佳答案
几点:
- 您替换样式表的代码似乎过于复杂。
- 此外,它似乎附加/替换了新的
link
元素 inside 现有link
元素,这意味着您正在生成无效的 HTML - 您很幸运,这完全有效。类似于:<link src="..."><link src="..." /></link>
- 您有
link
的号码元素 (2) 硬编码。如果每次链接元素的数量发生变化时都需要更改代码(并且不要说这不会发生),那么您将遇到大问题。
您可以通过首次使用您的函数来解决所有这些问题,只需创建链接元素,将其附加到头部的末尾并存储对它的引用。然后下次使用该引用,不要删除链接,只需更改其 src
.
针对您的问题:加载这样的样式表是异步的,这意味着在创建 link
之后元素脚本继续执行(包括获取 offsetWidth
的部分)而不等待加载样式表。
您需要附上 load
链接的事件处理程序并放置依赖于 offsetWidth
的所有内容进入那个处理程序:
newTheme.addEventListener("load", function() {
var NavW = document.getElementById("wrap").offsetWidth;
// get and USE width here
}, false);
关于javascript - offsetWidth 返回未知值 (JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24928951/