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

Question

I wrote a slider control in JavaScript and have some concerns about it. Script is initialized on window.onload and transforms all elements having class slider to sliders.
For example:

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

Problem is when document.load event is fired elements are not rendered yet, so I can't compute slider handle position without having width of the slider. I made a workaround that creates an timer for each slider that checks if slider has non-zero width then sets handle position and removes itself.

But that's very ugly solution. Do you have an idea how to do it in the proper way?

Answer 1

You can always use this:

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

Or this way:

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)
     }
}

Another hack you can try is:

    if (window.addEventListener){

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

    } else if (window.attachEvent) {

      window.attachEvent('onload', ready)
    }

EDIT:

if both of the above methods are not working, try the one below it should be fool proof and if that does not work. there might be something else wrong in your code:

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 );

The logic behind this is, The makeDoubleDelegate() function would be put in the first JS file, ready for invokation any time. What it does is accept two functions as arguments, checks to see if they exist, and if so, return an anonymous function containing valid, existing functions.

The first time that window.onload is called, window.onload itself is undefined, so what gets returned is an anonymous function with only myNewFunction() inside. On subsequent window.onload assignments, window.onload does exist, so whatever it holds will be wrapped up with the new function. And so the list grows.