Некоторое время назад я столкнулся с проблемой, когда добавил функцию адаптивного размера экрана в код каруселя TouchSlider.js, написанный LJW. Независимо от того, какой метод используется, вы не можете получить высоту и ширину метки IMG. В конце концов, вы можете установить только соотношение высоты и ширины для картинки. Я написал несколько демонстраций, чтобы проверить это, пока у меня сегодня есть время, и я нашел причину. Позвольте мне объяснить это подробно. Если с этим что -то не так, пожалуйста, не стесняйтесь сфотографироваться ~~~
Прежде всего, насколько я знаю: методы получения высоты и ширины:
obj.style.width (высота);
obj.offsetWidth (OffSetheight);
obj.clientWidth (ClientHeight);
getComputedStyle и CurrentStyle;
obj.naturalWidth (NaturalHeight)
Ради простоты повествования, здесь является лишь ширина.
Давайте сначала поговорим о первом методе: obj.style.width; Этот метод может получить значение только в том случае, если ширина записана на метке с помощью атрибута стиля, в противном случае возвратное значение будет пустым. Посмотрите на следующую демонстрацию:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <script> var imgw = document.getElementsbytagname ('img') [0] .style.width; оповещение (IMGW); // возвратное значение составляет 400px, в противном случае оно вернется пустым; </script>Приведенный выше метод применяется только к добавлению значения ширины к атрибуту стиля тега. Добавление значения ширины в лист импортированного стиля (независимо от того, импортируется ли он по ссылке или тег стиля на странице HTML) не получит значение и вернуть его пусто.
Тогда давайте поговорим о втором методе и третьем методе obj.offsetWidth (OffSetheight); obj.clientWidth (ClientHeight); Вообще говоря, если этикетка не устанавливает значение заполнения и пограничного значения, то два полученных значения одинаковы. Но во многих случаях это не так. Фактически, OffsetWidth получает значение ширины + значение заправки + пограничное значение, клиентская Whidth получает значение ширины + накладное значение, см. Следующую демонстрацию:
<style>img{ padding:20px;border:1px solid red;}</style><img src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658"><script>var img = document.getelementsbytagname ('img') [0], imgoffsetwidth = img.offsetwidth, // 442px imgclientwidth = img.clientwidth; // 440px; </script>Обратите внимание, что ширина тега IMG, которую вы получаете, - это стиль = "ширина: 400px", добавленная в тег IMG. Если это значение свойства удаляется, то значения, возвращаемые ImgoffsetWidth и ImgClientWidth в приведенной выше демонстрации, являются значениями высоты и ширины самого изображения. Вы можете попробовать это.
Кроме того, GetComputeDStyle и CurrentStyle являются двумя методами совместимости обработки. Полученные значения представляют собой только значения высоты и ширины изображения, отображаемого на экране. Значения прокладки и границы тега IMG не будут получены; Но GetComputeDstyle подходит для браузеров Firefox/IE9/Safari/Chrome/Opera, а CurrentStyle подходит для IE6/7/8. Однако, если тег IMG не вводит лист стилей, даже если он не устанавливает атрибут стиля, то только getComputEdstyle может получить значение, то есть высота и значение ширины самого изображения, а CurrentStyle возвращает Auto. Вот демонстрация:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <script> getStyle (el, name) window.getComputedStyle (el, null) [name]; } else {return el.currentStyle [name]; }} var div = document.getElementsbytagname ('img') [0]; оповещение (getStyle (div, 'width')); </script>Вы можете удалить атрибут стиля в теге IMG, а затем проверить его.
Наконец, существует метод obj.naturalWidth (NaturalHeight), который является недавно добавленным методом для получения высоты и ширины элементов в HTML5, но он применим только к браузере Firefox/IE9/Safari/Chrome/Opera. Вот демонстрация для каждого браузера:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <croppt> document.addeventlister (domontentledloaded getimgnaturalstyle (img, callback) {var nwidth, nheight if (img.naturalwidth) {// Современный браузер nwidth = img.naturalwidth nheight = img.naturalheight} else {// ie6/7/8 var imgae = function () {callback (image.width, image.height)}} return [nwidth, nheight]} var img = document.getelementsbytagname ('img') [0], imgnatural = getimgnaturalstyle (img); </script>Следует отметить, что в IE6/7/8 Browser Image.SRC получается только после того, как изображение IMG полностью загружено, в противном случае будет сообщена ошибка.
Когда дело доходит до полной загрузки изображения, оно решает проблему, с которой я столкнулся в прошлый раз, не может получить высоту изображения;
document.addeventlistener ("domcontentloaded", function () {// Причина в том, что наш код был записан в такой среде. В настоящее время тег IMG был загружен, то есть существует только структура DOM, и изображение не было полностью загружено, поэтому полученные значения все 0, но если мы напишем в окне. Окончанная среда, мы можем получить высоту и ширину показаны);Другими словами, приведенные выше методы для получения высоты и ширины изображения должны основываться на предпосылке, что изображение было полностью загружено.
Хорошо, с моими способностями я могу только это понять. Если есть что -то не так, пожалуйста, не стесняйтесь сфотографироваться ~~
Вышеупомянутый простой пример JS получает высоту и ширину изображений IMG, - это все контент, которым я поделился с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.