Question

我在javascript中编写了一个滑块控件并对它有一些担忧。脚本在window.onload上初始化，并将具有类滑块的所有元素转换为滑块例如：

<div id="hueSlider" class="slider" min="0" max="360" value="240"></div>

问题是当document.load事件被触发时元素还没有渲染，所以我无法计算滑块手柄位置而没有滑块的宽度。我做了一个解决方法，为每个滑块创建一个计时器，检查滑块是否具有非零宽度，然后设置手柄位置并自行移除。

但那是一个非常丑陋的解决方案。你知道如何以正确的方式做到这一点吗？

Answer 1

您可以随时使用：

window.onload = function(){
    // Access elements in here
};

或者这样：

if(document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function(){
        // Access elements in here for modern browsers
    }, false);
} else {
    document.attachEvent("onreadystatechange", function(){
        if(document.readyState === "complete") {
            // Access elements in here for older browsers
        }
    });
}

Answer 2

function checkLoad()
{
     if (window.onLoad)
     {
          // you can call your statements in here
     } else {
          setTimeout('checkLoad();', 1000)
     }
}

你可以尝试的另一个黑客是：

    if (window.addEventListener){

       window.addEventListener('load', ready, false)

    } else if (window.attachEvent) {

      window.attachEvent('onload', ready)
    }

修改

如果上述两种方法都不起作用，请尝试下面的方法，应该是万无一失的，如果不起作用的话。你的代码可能还有其他错误：

function makeDoubleDelegate(function1, function2) { return function() { if (function1) function1(); if (function2) function2(); //call your get slider width statements in here. } } window.onload = makeDoubleDelegate(window.onload, myNewFunction );

这背后的逻辑是，makeDoubleDelegate（）函数将放在第一个JS文件中，随时可以调用。它的作用是接受两个函数作为参数，检查它们是否存在，如果存在，则返回一个包含有效的现有函数的匿名函数。

第一次调用window.onload时，window.onload本身是未定义的，因此返回的是一个匿名函数，里面只有myNewFunction（）。在随后的window.onload赋值中，window.onload确实存在，所以无论它持有什么都将用新函数包装。这个名单也在增长。

如何在加载时获得元素宽度？

2 个答案: