Ancho asignado en porcentaje pero quiere obtenerlo en píxeles

.test {
  border: 1px solid;
  cursor: pointer;
  height: 10px;
  position: relative;
  width: 100%;
}

<div id="test1" class="test"></div>

He mostrado mi HTML id y su CSS. Ahora cuando estoy haciendo $('#test').width() estoy obteniendo 100. quiero su width en píxeles (no en %).

¿Alguien puede decir cómo obtener su ancho en píxeles?

Una de las opciones también puede ser que ese elemento principal no esté visible. Aquí hay un ejemplo: http://jsfiddle.net/nDMM3/

Puede ver que el ancho de retorno de jQuery = 100 (como 100%)

.test {
    border: 1px solid;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 100%;
    display:none;
}

#test2{
   width:100%;
}

<div id="test1" class="test">
   <div id="test2">
      Hello
   </div>    
 </div>   

 alert($('#test2').width());

.width() obtiene “… el ancho calculado actual” del elemento en el que se usa, según la documentación de ancho de jQuery: http://api.jquery.com/ancho/por lo que el valor de retorno de $('#heatMapBar').width() está en píxeles, no en porcentaje. Sugeriría usar la herramienta de desarrolladores para verificar el ancho, puede ser que en #heatMapBarEl contexto actual de , su ancho es 100px.

Si miras aquí: http://jsfiddle.net/NkQXa/1/ verás que #test se establece en width:50%;pero alerta sobre el ancho de píxel real.

Puede haber un problema con múltiples divs que tienen un ancho porcentual:

<div style="width: 50%">
<div id="getMyWidth" style="width: 100%"></div>
</div>

En este caso, me devuelve 100 como ancho para el div interno. Lo resolví tomando el ancho del div exterior.

Otra solución sin jquery es usar la propiedad clientWidth disponible en HTMLElements

document.getElementById('test1').clientWidth

Residencia en de Honzik responda allí, esta es una pequeña solución en caso de que el elemento necesario para especificar su ancho esté dentro de un elemento principal oculto.

function getWidth(elemID) {
    // get parent element unique id (must have)
    var parentId = $("#"+elemID).parent().prop("id"); 
    // remove the child element based on the specified element id
    $("#"+elemID).remove();
    // append a new child element but on body where most probably is not set to "display:none"
    $("body").append('<div id="'+elemID+'">Hello</div>');
    // get the width of the newly appended child element and store it to a variable
    var width = $("#test2").width();
    // remove child element from body
    $("#"+elemID).remove();
    // re-append child element to its former position under former parent element (having CSS attribute "display:none")
    $(parentId).append('<div id="'+elemID+'">Hello</div>');
    // display stored element width 
    alert(width);
}
// usage to get the element's width
getWidth("test2");

¡Pruébalo en el siguiente fragmento!

function getWidth(elemID) {
        var parentId = $("#"+elemID).parent().prop("id"); // your parent element should have a unique id specified
        $("#"+elemID).remove();
        $("body").append('<div id="'+elemID+'">Hello</div>');
        var width = $("#test2").width();
        $("#"+elemID).remove();
        $(parentId).append('<div id="'+elemID+'">Hello</div>');
        alert(width);
    }
getWidth("test2");

.test {
    border: 1px solid;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 100%;
    display:none;
}

#test2{
   width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1" class="test">
   <div id="test2">
      Hello
   </div>    
 </div>

Eso puede ser una coincidencia. Según la documentación oficial de api.jqery.com se afirma que

Obtenga el ancho calculado actual para el primer elemento en el conjunto de elementos coincidentes.

Para confirmar que está obteniendo el ancho en píxeles, puede equiparar este valor con el método .css(width) de jQuery. Devuelve el ancho en píxeles y, por lo tanto, puede confirmar que la altura de retorno está en píxeles.

Solo una idea… no odien. Sé que no cubre todas las eventualidades, pero algo como este podría verificar cada uno de los elementos padres para las reglas css deseadas (pantalla: ninguno; en este caso). Saqué la idea de aquí.

El único problema es cuando un sitio se vuelve más complicado… se vuelve lento.

Pero es un punto de partida.

//showing as 100%
alert($('#test2').width());
//use window.load to ensure .width() isnt doing anything funny
$(window).load(function(){
//checks to see if any of its parents have display:none; we can have multiple checks here if required
    if ($( "#test2" ).parents().css('display') == 'none') {
//iterate through each parent of the selected item  
        $( "#test2" ).parents().each(function () {
//only change the display value if the element has a display:none;
            if ($(this).css('display') == 'none') {
                $(this).css('display', 'block');
                alert($('#test2').width());//or whatever we want to do with this number
//reset values here       
                $(this).css('display', 'none');
           }
        });
    }
//showing as 100%
    alert($('#test2').width());
});