如何在负载上获得元素宽度

How to get element width on load?

本文关键字：元素 负载      更新时间：2023-09-26

我用JavaScript写了一个滑块控件，对它有一些顾虑。脚本在window.onload上初始化，并将所有具有类slider的元素转换为滑块。
例如:

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

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

但这是一个非常丑陋的解决方案。你知道如何正确地做这件事吗?

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文件中，随时准备调用。它所做的是接受两个函数作为参数，检查它们是否存在，如果存在，返回一个包含有效的、存在的函数的匿名函数。

第一次看到窗口。Onload被称为window。onload本身是未定义的，所以返回的是一个内部只有myNewFunction()的匿名函数。在随后的窗口。Onload赋值，窗口。Onload确实存在，所以它所保存的东西都将被新函数包装起来。

你可以这样做:

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
        }
    });
}
相关文章：