.css('width) и .css(' height) против .width() и .height()

Ответ 1

var elH = someElement.height();           // 200

.height() возвращает Число, а

var elH = someElement.css("height");      // "200px"

выше jQuery обращается к свойству элемента style как JS:

var height = someDOMelement.style.height; // "200px"

возвращает значение String в px.

Ответ 2

Из . height() документация -

Разница между .css('height') и .height() заключается в том, что последний возвращает значение пикселя без единицы (например, 400), а первое возвращает значение с единицами нетронутыми (например, 400 пикселей). Метод .height() рекомендуется, когда высота элемента должна использоваться в математическом вычислении.

Если вам нужно использовать высоту в вычислении, получите значение с помощью .height().

Ответ 3

Ребята ive спрашивали, и никто не может действительно сказать мне преимущества использования .css('width) и .css(' height), а не .width() и .height().

Запрос CSS даст вам прикладное значение, как в 5px или 1em, или то, что ему присваивается.

Используя jQuery, вы можете использовать следующие методы:

• .height (высота элемента, без заполнения, полей или границ)
• .innerHeight (высота элемента + дополнение)
• .outerHeight (высота элемента + заполнение и границы)
• .outerHeight(true) (высота элемента + дополнение + границы + поле)
• .width (ширина элемента, без заполнения, полей или границ)
• .innerWidth (ширина элемента + дополнение)
• .outerWidth (ширина элемента + заполнение и границы)
• .outerWidth(true) (ширина элемента + дополнение + границы + поле)

Все эти методы возвращают только число, представляющее единицы высоты/ширины в пикселях.

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

Кроме того, поскольку эти методы всегда возвращают единицы как простые число легче рассчитать с ними, как ранее упоминалось как вам не нужно беспокоиться о самом измерении, т.е. px, em, и т.д..

DEMO - Демонстрация методов высоты (то же самое относится к ширине)

В приведенной выше демонстрации используется div:

<div id="myDiv">My Div</div>

Со следующим CSS:

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

Используя этот script:

var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);

var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);

Результат:

height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52

Ответ 4

Я дал этот ответ, потому что вопрос задавал вопрос о том, что вы можете сделать с css(), а не width() и наоборот. Существует интересный случай для скрытых элементов страницы.

Недавно у меня была ситуация, когда мне нужно было перемещать некоторые элементы динамически, которые иногда скрывались, иногда не при загрузке страницы. Когда элементы не были скрыты, было легко просто использовать фактическую ширину элементов для создания новой структуры DOM. Но когда элементы скрыты, используя .width() returned 0, и это правильно. Поэтому мне нужно было добавить информацию об ширине CSS в класс элементов, и из этого я смог создать оператор типа

var width = $('#element').width() == 0 ? parseInt($('#element').css('width')) : $('#element').width();

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

Надеюсь, это добавит понимание разницы между тем, что вы можете сделать с этими двумя методами.

Ответ 5

они также возвращают/устанавливают разные значения (не говоря уже о суффиксе 'px')

если у вас есть box-sizing: border-box

см. этот пример: http://jsbin.com/fugusixila/edit?html,css,js,console,output

Ответ 6

.width возвращает единичное значение, где as.css( "width" ) возвращает значение css, ширина должна использоваться с математическими вычислениями

http://api.jquery.com/width/

Ответ 7

Yeap!
Главное, так как большинство из всех сказали ".hight() возвращает значение пикселя без единицы.

Но остается вопрос: почему это так...?... Почему эта мысль была такой?

@Jay Blanchard хорошо сказал: " Метод .height() рекомендуется, когда высота элемента должна использоваться в математическом вычислении."

Таким образом, если я могу добавить, используйте " CSS" при каждом использовании собственных автономных реакций браузера - очень удобно вычислять/реагировать на расположение элементов в процессе зависания окна /div.

Используйте width()/ height() для вычисления результатов эффекта JQuery, таких как внутренние слои hide()/show() (как вы знаете не будет влиять на CSS height).
Также обратите внимание, что свойство CSS height, например не включает, например, отступы, границы или поля (у вас нет внутреннего X/внешнего X CSS dim). Поэтому они должны быть рассчитаны.

Взгляните на jQuery: получите высоту скрытого элемента в jQuery

Ответ 8

К настоящему времени люди должны знать, что их следует использовать для математики, а другие не должны...

Или это?

Я немного сделал тест скорости по различным параметрам и согласно моим выводам:

• Быстрее захватить ширину с помощью .css
• Быстрее устанавливать ширину с помощью .width

Итак, другими словами, чтобы что-то захватить и установить другое, вы, вероятно, должны:

$('#element1').width(parseInt($('#element2').css('width'), 10));

Ответ 9

". height() всегда будет возвращать высоту содержимого независимо от значения свойства CSS-размера. Как и в случае с jQuery 1.8, для этого может потребоваться получить свойство высоты CSS плюс размер окна и затем вычесть любую потенциальную границу и заполнение для каждого элемента, когда элемент имеет размер коробки: border-box. Чтобы избежать этого штрафа, используйте .css(" height "), а не .height()"

http://api.jquery.com/height/

Ответ 10

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

У меня есть div, называемый myDiv, как это:

border:1px solid black;
padding-right: 15px;
padding-left:15px;
margin-right:10px;
margin-left:10px

Консоль дает мне следующее:

$('#myDiv').css('width') = 1100px;
$('#myDiv').width() = 1068;

1100 включает 15 пикселей для правильного заполнения, 15 пикселей для левого заполнения, 2 пикселя для границы (1 для каждой стороны), но НЕ поля. По крайней мере, для меня в хроме. 1068+15+15+1+1 = 1100

Да, для выполнения Number($('#myDiv').css('width').replace('px', '')) есть накладные расходы, но вам нужно сделать это только один раз. И вам нужно указать результат как число, если вы хотите, чтобы Number($('#myDiv').css('width').replace('px', '')) + 99 составлял 1199. В противном случае вы получите 110099 в качестве ответа.