Question

我有一个用于默认属性的链接css文件，另一个用于更改wiewport时更改的新闻。在JS脚本的最后，我在全局值NavW中填充了元素的offsetWidth。因此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);

offsetWidth返回未知值（JS）

1 个答案: