Как я могу получить ширину и высоту элемента div с помощью jquery? - PullRequest
Новая
       13

Как я могу получить ширину и высоту элемента div с помощью jquery?

3 голосов
/ 12 июля 2011

Как узнать ширину и высоту элемента div?

например, 

<div style="width:100px;height:100px;overflow:hidden; float:left; margin:0px 0px 5px 0px; border:1px solid #000;">
    <img src="daisy_03_20110712163828_extra.jpg" alt="daisy_03_20110712163828_extra.jpg" width="800" height="589" id="preview"/>
</div>

Я пробовал этим методом, 

var previewwidth = $("#preview").css('width');
var previewheight = $("#preview").css('height');

Но я получаю 800px, что является шириной изображения вместо!

Я хочу получить 100 как number на самом деле.

Ответы [ 7 ]

3 голосов
/ 12 июля 2011

Есть 3 возможных способа сделать это:

One: 

$("#preview").parent().css('width');
$("#preview").parent().css('height');

Два: 

$("#preview").parent().width();
$("#preview").parent().height();

Это будет , а не , включая поля, отступы и границы.

Три: 

$("#preview").parent().outerWidth();
$("#preview").parent().outerHeight();

Это будет включать отступы, рамку и опционально поля. Для включения поля необходимо добавить true в функцию, т.е. .outerHeight(true).

3 голосов
/ 12 июля 2011

Дайте div id и используйте его вместо id вашего изображения.

2 голосов
/ 12 июля 2011

Вы используете $("#preview"), который будет возвращать img, поскольку тег img имеет значение id="preview"

Первый вариант : 

$("#preview").parent().css('width');

Второй, лучший вариант :

Дайте div id, скажите "foofoo": 

<div id="foodoo">...</div>
$("#foofoo").css('width');

В превратить его в целое число Обернуть в parseInt(): 

parseInt($("#foofoo").css('width'));
1 голос
/ 12 июля 2011 
var previewwidth = $("#preview").parent().width();
var previewheight = $("#preview").parent().height();
0 голосов
/ 12 июля 2011

Вы можете сделать это просто так ( jsfiddle в качестве примера): 

var mydiv = jQuery('#preview').parent('div');
var mywidth = mydiv.width();
var myheight = mydiv.height();
0 голосов
/ 12 июля 2011

preview - это идентификатор вашего изображения, поэтому, конечно, ваш код возвращает размер изображения.Просто дайте вашему div другому уникальному идентификатору и используйте его вместо #preview в вашем селекторе jQuery. 

<div id="myDiv" style="width:100px;height:100px;overflow:hidden; float:left; margin:0px 0px 5px 0px; border:1px solid #000;">
    <img src="daisy_03_20110712163828_extra.jpg" alt="daisy_03_20110712163828_extra.jpg" width="800" height="589" id="preview"/>
</div>

Следующая строка вернет ширину / высоту div в виде 100px:

var previewwidth = $("#myDiv").css('width');
var previewheight = $("#myDiv").css('height');

И получить результат в виде числа без единицы вместо строки: 

var previewwidth = $("#myDiv").width();
var previewheight = $("#myDiv").height();
0 голосов
/ 12 июля 2011

Вы можете использовать height() и width().Посмотрите на API для такого рода вопросов ..

Кроме того, как указано выше, ваш селектор неверен.

...