Existem alguns métodos para o JS obter a largura e a altura dos elementos ocultos na Internet, mas pode haver algumas situações que não podem ser obtidas.
Por exemplo:
<! Doctype html> <html lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> teste </title> </wead> <body> <div id = "testo" style = "> doll: nenhum: nenhum"> "não é </title </head> <body> <div idf =" the "style =" d. Todos os rios e mares são derramados nos rios e mares, e são dados ao povo do mundo. </div> <div id = "test2" style = "display: nenhum"> <div style = "display: nenhum"> <div id = "test2_child"> eu tenho um pote de vinho que é suficiente para confortar a poeira. Todos os rios e mares são derramados nos rios e mares, e são dados ao povo do mundo. </div> </div> </div> <div id = "test3"> <div> <div id = "test3_child"> eu tenho um pote de vinho que é suficiente para confortar a poeira. Todos os rios e mares são derramados nos rios e mares, e são dados ao povo do mundo. </div> </div> </div> </div> </body> </html>
O teste pode ser obtido, mas o test2_child não pode ser obtido. Em vista dessa situação, escrevi um método para resolvê -lo sozinho.
Solução:
1. Obtenha o elemento (pegue a largura e a altura) todos os elementos ancestrais ocultos até o elemento corporal, incluindo você.
2. Obtenha as propriedades de exibição e visibilidade de todos os elementos ocultos e salve -os.
3. Defina todos os elementos ocultos como visibilidade: oculta; exibição: bloco! IMPORTANTE; (O motivo de importante é evitar prioridade insuficiente).
4. Obtenha a largura e a altura do elemento (pegue a largura e a altura).
5. Restaure as propriedades de exibição e visibilidade do estilo de todos os elementos ocultos.
6. Retorna a largura do elemento e o valor da altura.
Implementação de código:
function getsize (id) {var largura, altura, elem = document.getElementById (id), Unnodes = [], nodestyle = []; getNoneNode (elem); // Obtenha o elemento de exibição de várias camadas: nenhuma; setNodestySyle (); largura = elem.clientwidth; altura = elem.clientHeight; resumenodestySyle (); retornar {largura: largura, altura: altura} função getNoNode (nó) {var display = getStyles (node) .getPropertyValue ('exibição'), tagname = node.nodename.tolowercase (); if (exibir! } else {nonEnodes.push (nó); if (tagName! = 'Body') getNoNode (node.parentnode); }} // Este método pode obter se existe a configuração final da propriedade de exibição e não pode ser estilo.Display. function getStyles (elem) {// suporte: ie <= 11+, firefox <= 30+ ( #15098, #14150) // ie lança em elementos criados em pop -ups // ff Enquanto isso, lança elementos de quadro através de "defaultView.getComputEdstyle" var vista = eLem.ownerDocument.Document; if (! View ||! View.Opener) {View = Window; } return view.getComputedStyle (elem); }; função setNodestySyle () {var i = 0; para (; i <donEnodes.Length; i ++) {var visibilidade = não -ENODES [i] .style.visibility, display = não -ENODES [i] .style.display, style = não -elodes [i] .getAttribute ("estilo"); // substitui outros estilos de exibição não -ENODES [i] .SetAttribute ("Style", "Visibility: Hidden; Display: Block! IMPLEMENTE;" + estilo); Nodestyle [i] = {visibilidade: visibilidade, exibição: display}}} função resumenodestyStyle () {var i = 0; para (; i <donEnodes.length; i ++) {não -ENODES [i] .style.visibility = nodestyle [i] .visibility; não -Nodes [i] .style.display = nodestyle [i] .Display; }}}Exemplo de demonstração:
var testSize = getSize ('teste'); console.log ("teste-> largura:" + testSize.width + "altura:" + testSize.Height); var test2childSize2 = getsize ('test2_child'); console.log ("test2child2-> width: + test2_child '); test3childSize = getSize ('test3_child'); console.log ("test3_child-> width:" + test3childsize.width + "altura:" + test3childsize.Height); // O valor de impressão é o seguinte teste-> Largura: 417 Altura: 18test2Child2-> Largura: 417 Altura: 18test3_Child-> Largura: 417 Altura: 18Notas:
1. Aberto, mostre todos os elementos ancestrais ocultos e obtenha os valores de largura e altura do elemento. Em alguns casos, pode ser incorreto obter o valor.
PS: Mas não se preocupe com isso, basta invadir o método quando algo realmente der errado.
2. A razão pela qual a exibição de elementos ancestrais ocultos e os atributos de visibilidade deve ser recuada mais tarde sem se afetar.
3. Além disso, o método getStyles é extraído do código -fonte jQuery, para que esse método possa obter se existe a configuração final do atributo de exibição.
PS: não pode ser obtido do Style.Display.
O método acima para obter elementos ocultos no JS é todo o conteúdo compartilhado pelo editor. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.