offsetWidth返回未知值(JS)

Question

我有一个链接的css文件用于默认属性，另一个用于当wiewport被更改时它发生变化的消息。在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中添加/替换了新的元素(一个现有的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);