Призначена ширина у відсотках, але ви хочете отримати її в пікселях

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.test {
  border: 1px solid;
  cursor: pointer;
  height: 10px;
  position: relative;
  width: 100%;
}
<div id="test1" class="test"></div>
</div> </div>

Я показував свій HTML-код id і його CSS. Тепер, коли я виконую $ ('# test'). Width() , я отримую 100 . Я хочу, щоб його ширина у пікселях (не в % ).

Чи можна сказати, як отримати його ширину в пікселях?

49
@kukkuz Так, я використовував скрипку в одному з відповідей нижче. У моєму випадку я не маю набору display: none , але маю складну сторінку. Я намагаюся відтворити просту скрипку, але поки що не можу це зробити.
додано Автор Muhammad Rehan Saeed, джерело
Пов’язана GitHub
додано Автор Muhammad Rehan Saeed, джерело
@MuhammadRehanSaeed, який результат ви отримали при виклику element.getBoundingClientRect (). Ширини або навіть просто element.clientWidth ?
додано Автор Kaiido, джерело
@MuhammadRehanSaeed element.clientWidth повернув 0 (якщо я пам'ятаю, що я запустив його на прикладі Hoznik, на коді питання він повернув 100)
додано Автор Peter Darmis, джерело
відредагована відповідь, щоб вона містила достатньо деталей. Я думаю, що це легко вирішує вашу проблему навіть під прихованим батьком або будь-яким предком.
додано Автор Peter Darmis, джерело

10 Відповіді

One of options can be too, that parent element is not visible. Here is example: http://jsfiddle.net/nDMM3/

Ви можете бачити, що jQuery повертає 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());
37
додано
@ mituw16 +1 Для вирішення цього, окрім використання setTimeout і спроби його знову трохи пізніше.
додано Автор Muhammad Rehan Saeed, джерело
Не припускайте, що хтось придумав розумний спосіб виправити це, чи не так?
додано Автор mituw16, джерело

.width() gets "...the current computed width" of the element that is used on, per the jQuery width documentation: http://api.jquery.com/width/, so the return value from $('#heatMapBar').width() is in pixels, not percent. I would suggest using developers tool to check the width, it may be that in #heatMapBar's current context, its width is 100px.

Якщо ви подивитеся тут: http://jsfiddle.net/NkQXa/1/ ви побачите, що #test встановлено на ширина: 50%; , але сповіщає фактичну ширину пікселя.

23
додано
.width() дає мені 39.4 ... але має бути близько 400 .... .... потім я перевірив .css ('width ') , який повернув "39.4%" ... ... ... ... ... див. відповідь @ honzik нижче, щоб пояснити, чому
додано Автор dsdsdsdsd, джерело
@Denzz @ tibc-dev @dsdsdsdsd @DJDaveMark Очікування на готовий DOM $ (функція() {...}) не працює, але використовує setTimeout для очікування біт і спробуйте ще раз. Хто-небудь з вас вирішив краще?
додано Автор Muhammad Rehan Saeed, джерело
JQuery (v3.1.1) повертає відсоток, якщо ви запитуєте значення занадто рано (в межах кута для мене) і у вашому CSS вказали відсоток.
додано Автор DJDaveMark, джерело
@ user1424564 Якщо ви подивитеся тут: jsfiddle.net/NkQXa/1 , ви побачите, що я Ви ввели свій точний тестовий випадок і отримали товщину пікселів. Проблема може бути в іншому місці.
додано Автор jezza-tan, джерело
Це не буде працювати з адаптивним дизайном. Повертає відсоток.
додано Автор tibc-dev, джерело
Але я можу побачити, що його ширина близько 700 px у фактичному
додано Автор Denzz, джерело
Правда! Це пов'язано з часом. Я перевірив таку ж ширину через кілька секунд, після чого він показав мені правильну ширину. Так що може бути час, коли я називаю це не було належним чином
додано Автор Denzz, джерело

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

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

У цьому випадку вона повертає 100 як ширину для внутрішнього div для мене. Я вирішив це, взявши ширину зовнішнього div.

5
додано
Це відбувається багато в макетів сітки Bootstrap, оскільки ви не встановлюєте ширину, ви встановлюєте class = "span12" або будь-що інше. Я згоден, найпростіше просто отримати ширину зовнішнього батьківського div.
додано Автор user101289, джерело

На основі відповіді 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's width
getWidth("test2");

Спробуйте виконати наведений нижче фрагмент!

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
</div> </div>
3
додано

Just an idea...don't hate. I know it doesn't cover every eventuality but something like this could check each of the items parents for the desired CSS rules (display:none; in this case). I got the idea from here.

Єдина проблема, коли сайт стає більш складним ... він стає повільним.

Але це точка стрибка.

//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());
});
2
додано

Це може бути співіснування. Відповідно до офіційної документації на api.jqery.com зазначено, що

Отримати поточну обчислену ширину для першого елемента в наборі відповідних елементів.

Щоб підтвердити, що ви отримуєте ширину в пікселях, ви можете прирівняти це значення до .css (ширина) методу jQuery. Вона повертає ширину в пікселях і, отже, ви можете підтвердити, що висота повернення знаходиться в пікселях.

2
додано

Іншим рішенням без jQuery є використання властивості clientWidth , доступного для HTMLElements

document.getElementById('test1').clientWidth
2
додано

Я не впевнений у цьому, але $ ("# id/.class"). Width() дає значення в пікселях у моєму випадку.

screen-shot of <a href=jQuery code">

У наведеному вище знімку ви можете знайти різні значення $ ("# id/.class"). Width() у пікселях при різному розмірі екрана браузера.

Для цього я використовую Firefox.

Ви також можете перевірити документацію jQuery на цю тему.

2
додано

Pls перевірити код, доданий нижче, я сподіваюся, що це найпростіший спосіб отримати ширину від відсотка до пікселя.

HTML

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

</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.

Дякую.

2
додано

Я думаю, що має працювати, але якщо з якоїсь причини він продовжує надавати вам% width, що ви можете зробити, це отримати ширину і потім розділити її на ширину вікна

var widthInPx = $(widnow).width()/$('yourElement').width
1
додано
@GavinSimpson: І 1 * (вікно) .width() буде рівним ширині вікна. Хіба це не те, що означає 100%?
додано Автор Jonathan Wood, джерело
@John T, не зовсім. cos width() дає "100", тобто відсоток і 100/100 = 1, тому ви просто закінчуєте шириною вікна. Але так, відповідь Jeevans страждає від того самого питання.
додано Автор Gavin Simpson, джерело
Я не думаю, що @jonathan Wood, оскільки window.width() повертає 100, тобто відсоток, який він дає у відсотках, тому 1 * (window) .width() є таким же, як 1 * 100, що ширина в пікселях.
додано Автор Gavin Simpson, джерело
Jeevan, я думаю, що ваш розрахунок неправильний. Це має бути ... код var widthInPx = $ (window) .width ()/(100/$ ('yourElement'). Width ()); код
додано Автор John T, джерело