Algum tempo atrás, encontrei um problema quando adicionei a função de tamanho de tela adaptável ao código de carrossel do touchslider.js escrito pela LJW. Não importa qual método seja usado, você não pode obter a altura e a largura da tag IMG. No final, você pode definir apenas uma proporção da altura e largura da imagem. Escrevi algumas demos para testá -lo enquanto tenho tempo hoje e encontrei o motivo. Deixe -me explicar em detalhes. Se houver algo de errado com isso, fique à vontade para tirar uma foto ~~~
Primeiro de tudo, os métodos para obter altura e largura são até onde eu sei:
obj.style.width (altura);
obj.offsetWidth (OfsethEight);
obj.clientWidth (ClientHeight);
getComputedstyle e CurrentStyle;
obj.naturalWidth (NaturalHeight)
Por uma questão de simplicidade da narrativa, aqui está apenas uma largura como exemplo.
Vamos falar sobre o primeiro método primeiro: obj.style.width; Esse método só pode obter o valor se a largura for gravada no rótulo usando o atributo de estilo, caso contrário, o valor retornado estará vazio. Veja a seguinte demonstração:
) document.getElementsByTagName ('img') [0] .style.width; alerta (imgw); // O valor de retorno é 400px, caso contrário, retornará vazio; </script>O método acima se aplica apenas à adição de valor de largura ao atributo de estilo da tag. Adicionar valor de largura à folha de estilo importada (seja importada do link ou da tag de estilo na página HTML) não receberá o valor e retornará vazio.
Então, vamos falar sobre o segundo método e o terceiro método obj.offsetWidth (OffsethEight); obj.clientWidth (ClientHeight); De um modo geral, se o rótulo não definir o valor do preenchimento e o valor da borda, os dois valores obtidos são os mesmos. Mas, em muitos casos, esse não é o caso. De fato, a largura de offset obtém o valor da largura + o valor do preenchimento + o valor da borda, a largura do cliente obtém o valor da largura + o valor do preenchimento, consulte a seguinte demonstração:
<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>Observe que a largura da tag IMG que você obtém é o estilo = "largura: 400px" adicionada à tag IMG. Se esse valor de propriedade for removido, os valores retornados pela imgoffsetWidth e imgclientWidth na demonstração acima são os valores de altura e largura da própria imagem. Você pode tentar.
Além disso, GetComputedStyle e CurrentStyle são dois métodos de processamento de compatibilidade. Os valores obtidos são apenas os valores de altura e largura da imagem exibida na tela. Os valores de preenchimento e borda da tag IMG não serão obtidos; Mas o GetComputedStyle é adequado para navegadores Firefox/IE9/Safari/Chrome/Opera, e o CurrentStyle é adequado para o IE6/7/8. No entanto, se a tag IMG não introduzir uma folha de estilo, mesmo que não defina o atributo de estilo, apenas o GetComputedStyle poderá obter o valor, ou seja, o valor da altura e da largura da própria imagem e o CurrentStyle retorna automaticamente. Aqui está uma demonstração:
<img src = "http://img.hb.aicdn.com/787bf87d05ad7745222dd92151b3051b463229a11109598-9qxv9c_fw68"> <cript> função getStyle () window.getComputedStyle (el, null) [nome]; } else {return el.currentstyle [nome]; }} var div = document.getElementsByTagName ('img') [0]; alerta (getStyle (div, 'largura')); </script>Você pode remover o atributo de estilo na tag IMG e testá -lo.
Finalmente, existe o método Obj.naturalWidth (NaturalHeight), que é um método recém -adicionado para obter a altura e a largura dos elementos no HTML5, mas é aplicável apenas ao navegador Firefox/IE9/Safari/Chrome/Opera. Aqui está uma demonstração para cada navegador:
<img src = "http://img.hb.aicdn.com/787bf87d05ad7745222dd92151b3051b463229a11109598-9qxv9c_fw658 getimgnaturalStyle (IMG, retorno de chamada) {var nwidth, nheight if (img.naturalwidth) {// navegador moderno nwidth = img.naturalwidth nheight = img.naturalheight} else {// ie6/7/8 function () {retorno de chamada (image.width, imagem.Height)}} retornar [nWidth, nheight]} var iMg = document.getElementsbytagname ('img') [0], imgnatural = getimgnatalstyle (img); </script>Deve -se notar que na imagem do navegador IE6/7/8 é obtida apenas após a imagem IMG estar totalmente carregada, caso contrário, um erro será relatado.
Quando se trata do carregamento completo da imagem, ele resolve o problema que o que encontrei da última vez, não pode obter a altura da imagem;
Document.AddeventListener ("DomContentLoaded", function () {// O motivo é que nosso código foi escrito em um ambiente desse tipo. Nesse momento, a etiqueta IMG foi carregada, ou seja, existe apenas a estrutura DOM e a imagem não foi totalmente carregada; portanto, os valores obtidos são todos, mas, se a janear).Em outras palavras, os métodos acima para obter a altura e a largura da imagem devem basear -se na premissa de que a imagem foi completamente carregada.
Ok, com minha habilidade, só posso entender isso. Se houver algo errado, fique à vontade para tirar uma foto ~~
O exemplo simples acima de JS obtendo a altura e a largura das imagens IMG é todo o conteúdo que compartilhei com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.