Высота изображения с использованием jQuery .attr получает размер родительского элемента, а не фактический атрибут высоты изображения в Chrome

0

У меня есть изображение, которое находится внутри обычного DIV. Позвольте называть его DIV b. Над DIV b есть еще один DIV, который я назову DIV a. DIV a имеет переполнение: скрыто. Вот код:

<div id="a">
  <div id="b">
    <img id="image" src="http://fgjdfgsjh.com/images/hghgajfhsd.jpg" height="186" width="900">
  </div>
</div>

... вот некоторые важные CSS для этого примера:

#a {overflow: hidden; height: 128px;}

... и, наконец, некоторые.js:

<script>
  $(document).ready(function(){
     var test = $('#image').attr('height');
     alert(test);
  });
</script>

Как вы можете видеть, на изображении уже установлен атрибут высоты. Мой скрипт (jQuery) должен захватить эту информацию, но когда я использую $ ('# image'). Attr ('height'), сценарий доставляет мне число 128, которое является высотой элемента #a, который содержит #b и изображение, а не ожидаемая высота изображения, которая равна 186 и устанавливается как атрибут в HTML.

Это происходит в Chrome. Firefox может получить правильную высоту изображения (186, а не 128).

Как получить реальную высоту изображения в Chrome? Можно ли это сделать с помощью простого простого jQuery или мне нужно сделать какой-то трюк (например, перезагрузить изображение в отдельном объекте и проверить его первоначальную высоту)?

Теги:
dom

2 ответа

1

CSS обычно предпочтительнее атрибута height. Чтобы использовать jQuery, используйте .css:

$('#image').css('height');

Который вернет здесь 186px. Если вы хотите только 186, используйте .height:

$("#image").height();
Поделиться
  • 0
    Ой, это странно. Я думал, что вы прибили это, но Chrome ведет себя странно по этому поводу. Я обновляю этот скрипт снова и снова и ... угадайте что? Иногда он будет отображать 128px, иногда - 186px! Это не соответствует Есть ли другой способ? Похоже, мне придется загрузить изображение отдельно ...
  • 0
    Вы уверены, что атрибуты высоты / ширины не используются для тегов IMG?
Показать ещё 2 комментария
0

У Chrome есть неустойчивое поведение по этой проблеме. Я попробовал код, предоставленный @Mooseman, но при обновлении страницы снова и снова, иногда скрипт появлялся бы 128px, иногда он появлялся бы 186px!

Похоже, единственный способ сделать это - загружать изображение динамически. Я заимствовал код отсюда: " получение ширины и высоты динамического изображения ".

В конце концов, код:

  $('<img/>').attr('src', $('#image').attr('src')).load(function() {
    // Then just get the resulting loaded image height by using:
    var myHeight = this.height;
  }
Поделиться
  • 0
    Это может работать, чтобы получить высоту, но это плохая практика, потому что изображение не будет загружено, пока документ не будет готов. Если изображение является частью HTML, оно может быть загружено одновременно с файлами JS / CSS.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню