Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Задания из "тестов по DOM" (https://javascript.ru/forum/misc/68023-zadaniya-iz-testov-po-dom.html)

Spirtikys 21.03.2017 13:13

Задания из "тестов по DOM"
 
Проришивал тесты. И наткнулся на такой вопрос
Когда у элемента гарантированно совпадают offsetHeight и clientHeight?

Вроде бы ничего особенного, но не понял ответа :(
Когда у элемента нет border и padding.

К чему тут падинг, или я что-то забыл?
https://developer.mozilla.org/en-US/...t/offsetHeight
https://developer.mozilla.org/en-US/...t/clientHeight

laimas 21.03.2017 13:22

clientHeight - внутренняя высота элемента, включая пространство между содержимым элемента и его границей (padding), без самой границы (border).

offsetHeight - высота элемента с учетом вертикальных полей (padding) и границ (border).

По ссылке же картинки, из которых не сложно понять, что когда у элемента нет border и padding.

Spirtikys 21.03.2017 13:43

Жестко торможу.
Так как лично я из картинки вижу, что padding входит в clientHeight (там явно задан padding-top)

ps
clientHeight - the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
offsetHeight - the height of the element including vertical padding and borders, as an integer.

И тот и тот включает все таки падинги, но client не включает скролл бар, получается, ответ все таки неверный?

laimas 21.03.2017 13:59

Цитата:

Сообщение от Spirtikys
Так как лично я из картинки вижу, что padding входит в clientHeight

Все правильно, это что противоречит ответу?

Все там верно, и в описании, и в картинках, и ответ на вопрос верен.

Spirtikys 21.03.2017 14:02

Разве он не должен быть таким "Когда у элемента нет border и scrollBar".
При чем тут паддинг в ответе, не могу понять =(

laimas 21.03.2017 14:04

Цитата:

Сообщение от Spirtikys
При чем тут паддинг в ответе, не могу понять =(

сожалею, но больше того, что там лаконично написано, сказать нечего.

Spirtikys 21.03.2017 14:13

http://stackoverflow.com/questions/4...d-clientheight

там лаконично написано, сказать нечего.

Так то оно лаконично намекает, что padding тут не в тему.

laimas 21.03.2017 14:19

Цитата:

Сообщение от Spirtikys
Так то оно лаконично намекает, что padding тут не в тему.

Да уж, тяжолый случай. А так:

var border = 5,
    padding = 5,
    height = 50;

var cHeight = padding * 2 + height;

var oHeight = border * 2 + padding * 2 + height; 

alert(cHeight+'\n'+oHeight)


Вопрос: в каком случае cHeight будет равно oHeight?

PS. Только теперь сам понял о чем все в "этих непониманиях" :)

Все верно, просто у меня другое в голове было.


Часовой пояс GMT +3, время: 19:05.