如何在加載時獲取元素寬度？

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 確實存在，因此它所持有的任何內容都將被新函數包裹起來。 所以名單越來越長。