странность размеров изображения - PullRequest
Новая
       26

странность размеров изображения

0 голосов
/ 30 августа 2011 
el = function(q) {return document.getElementById(q)};
el('strange').style.height = '100px'
el('strange').height = 2000
alert(el('strange').height) // 100?
alert(el('strange').getAttribute('height')) //2000? Wait.. What?

el - это сокращение от document.getElementById. Может кто-нибудь объяснить мне, что происходит? Я подозреваю, что свойство высоты немного отличается от атрибута высоты: они изменили его, чтобы он возвращал вычисленный стиль. Я не уверен, потому что DOM 0 говорит, что свойство должно быть таким же, как getAttribute, но свойство привязки href не совпадает с getAttribute в большинстве браузеров. И:

https://developer.mozilla.org/en/DOM/HTMLImageElement

HTML: 

<img id="strange" src="http://images.devshed.com/fcw/belts/fcw_forums.gif" />

1 Ответ

0 голосов
/ 30 августа 2011

Странность не является точностью, если вы ее заметили. Это происходит из-за того, что вызов атрибута height как установщика создает атрибут html height в теге img, и, насколько я знаю, это атрибут, используемый только для canvas. Нет никакой связи между этим html-тегом и значением dom.

Если я сделаю следующее: 

strange.style.height = '100px';
strange.height = 2000;
console.log(strange.height); // 100
console.log(strange.style.height); // 100px

вывод будет 100 и 100px высота на DOM правильная. Однако, используя атрибут getAttribute для поиска атрибутов в теге html, для этого возвращается «2000».

EDIT

Хорошо, я думаю, что понял

Есть 3 разных вещи: Высота CSS, атрибут высоты, значение DOM высоты.

Самым простым является значение DOM. Он всегда возвращает реальную высоту img в пикселе css. Если установлено значение trhough css, оно будет основано на значении css, если оно установлено через атрибут, оно будет рассчитываться исходя из этого.

Теперь два других.

Они оба определяют размер img. Но значение CSS как приоритет над атрибутом HTML. Это указано в рекомендации w3 . Я цитирую

Для

Встроенные замещенные элементы, замененные элементы на уровне блоков в нормальном потоке, замещенные элементы «встроенный блок» в нормальном потоке и плавающие замененные элементы

Утверждается, что

Если для 'height' и 'width' оба имеют вычисленные значения 'auto', а элемент также имеет внутреннюю высоту, то эта внутренняя высота является используемым значением 'height'.

Следовательно, img (я думаю, это элемент inline-block) использует значение высоты css, но если для этого параметра установлено значение auto (и это значение по умолчанию), оно использует intrinsic height. И это атрибут html.

Таким образом, вызов strange.height в качестве получателя получает значение DOM, а в качестве установщика он устанавливает атрибут HTML.

EDIT2 И чтобы ответить точнее, у вас есть 3 основных правила:

  • CSS преобладает над атрибутом
  • DOM должен совпадать с атрибутом
  • DOM отражает реальность (здесь реальная высота)

Вы просто не сможете следовать 3 правилам, если указаны и CSS, и значение атрибута, и они различаются. Дело в том, что DOM должен быть таким же. Здесь не может быть, если есть CSS, поэтому он имеет другое значение.

В качестве примечания, хорошее объяснение использования атрибута высоты здесь: http://reference.sitepoint.com/html/img.

...