2

我有一个用于默认属性的链接 css 文件，另一个用于在 wiewport 更改时它会更改的消息。在 JS 脚本的最后，我将元素的 offsetWidth 放入全局值 NavW。所以 JS 似乎返回了错误的值，它不仅在 dom 中计算，而且基于第一个默认 css 属性而不是新属性。但是，目标元素正确呈现。请注意，条件中的值 '2' 是因为存在一个不是 css 文件而是图标的 Link 元素。

    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;

    }
4

1 回答 1

1

几点：

  • 您替换样式表的代码似乎非常复杂。
  • 此外，它似乎在现有元素中追加/替换新link元素，这意味着您正在生成无效的 HTML - 您很幸运，这完全有效。就像是：link<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);
于 2014-07-24T10:34:15.213 回答