Назначить ширину в процентах, но хотите получить ее в пикселях

Ответ 1

.width() получает "... текущую вычисленную ширину" элемента, который используется в документации по ширине jQuery: http://api.jquery.com/width/, поэтому возвращаемое значение из $('#heatMapBar').width() находится в пикселях, а не в процентах. Я бы предложил использовать инструмент разработчика для проверки ширины, может быть, в текущем контексте #heatMapBar его ширина составляет 100 пикселей.

Если вы посмотрите здесь: http://jsfiddle.net/NkQXa/1/, вы увидите, что #test установлен на width:50%;, но он предупреждает о фактической ширине пикселей.

Ответ 2

Один из параметров может быть слишком, этот родительский элемент не отображается. Вот пример: http://jsfiddle.net/nDMM3/

Вы можете видеть, что jQuery return width = 100 (например, 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());

Ответ 3

Может возникнуть проблема с несколькими div, имеющими процентную ширину:

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

В этом случае он возвращает 100 как ширину для внутреннего div для меня. Я решил это, взяв ширину внешнего div.

Ответ 4

Основываясь на Honzik's ответе, это небольшое обходное решение, если элемент, необходимый для указания его ширины, находится внутри скрытого родительского элемента.

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 width
getWidth("test2");

Попробуйте это в следующем фрагменте!

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>

Ответ 5

Это может быть совпадение. Согласно официальной документации api.jqery.com, говорится, что

Получить текущую вычисленную ширину для первого элемента в наборе согласованных элементов.

Чтобы подтвердить, что вы получаете ширину в пикселях, вы можете приравнять это значение к методу .css(width) jQuery. Он возвращает ширину в пикселях и, следовательно, вы можете подтвердить, что высота возврата находится в пикселях.

Ответ 6

Просто идея... не ненавидите. Я знаю, что это не распространяется на каждую вероятность, но что-то вроде this может проверять каждый из родительских элементов для желаемых правил CSS (display: none; в этом случае). Я получил идею от здесь.

Единственная проблема в том, что сайт становится более сложным... он становится медленным.

Но это прыгающая точка.

//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());
});

Ответ 7

Другим решением без jquery является использование свойства clientWidth, доступного в HTMLElements

document.getElementById('test1').clientWidth

Ответ 8

Я не уверен в этом, но $("#id/.class").width() дает значение пикселей в моем случае.

В приведенном выше скриншоте вы можете найти разные значения $("#id/.class").width() в пикселях при разном размере экрана браузера.

Ну, я использую Firefox для этой цели.

Вы также можете проверить документацию jquery по этой теме.

Ответ 9

Проверьте код, приведенный ниже, я надеюсь, что это самый простой способ получить ширину от процентного до пикселя.

HTML

<div id="test1" class="test">
 <p id="widthPx"> Perentage to Pixel : </p>
</div>

CSS

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

JS

var widPx = $('#test1').width();
$('#widthPx').append(Math.round(widPx) + 'px');

OUTPUT

Переход к пикселю: 609px

Выход будет основываться только на ширине div.

Спасибо.

Ответ 10

Это могло быть ошибкой в более ранних версиях jQuery, вплоть до этого Github PR: https://github.com/jquery/jquery/pull/3741

Хотя сейчас 2019, мне пришлось использовать jQuery 1.12.4 и я заметил, что вычисление ширины скрытого (скрытого родительским) элемента всегда было 100.

Отладкой я обнаружил, что функция externalWidth jQuery (аналогичная для innerHeight, innerWidth, height, width, outerHeight и outerWidth) будет вызывать width cssHook, которая, в свою очередь, вызывает getWidthOrHeight(). getWidthOrHeight() может получить ширину в%, которая затем возвращается как есть. Функция width не проверяет, что было возвращено, и пропускает его через parseFloat, в результате чего значение 100% становится равным 100.

Ответ 11

Я думаю, что это должно сработать, но если по какой-то причине он продолжает давать вам ширину%, то вы можете получить ширину, а затем разделить ее на ширину окна

var widthInPx = $(widnow).width()/$('yourElement').width