javascript - offsetWidth 返回未知值 (JS)

Question

我有一个链接的 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;

    }

Answer 1

几点:

• 您替换样式表的代码似乎过于复杂。
• 此外，它似乎附加/替换了新的 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);