Il existe certaines méthodes pour que JS obtienne la largeur et la hauteur des éléments cachés sur Internet, mais il peut y avoir certaines situations qui ne peuvent pas être obtenues.
Par exemple:
<! Doctype html> <html lang = "en"> <éadf> <meta http-equiv = "tent-type" contenu = "text / html; charset = utf-8" /> <title> test </ititle> </ head> <pody> <div id = "test" style = "affiche: non"> J'ai un pot de vin qui est suffisant pour réconforter le poussière. Toutes les rivières et les mers sont versées dans les rivières et les mers, et ils sont donnés aux habitants du monde. </ div> <div id = "test2" style = "affiche: aucun"> <div style = "affiche: aucun"> <div id = "test2_child"> J'ai un pot de vin qui est suffisant pour réconforter la poussière. Toutes les rivières et les mers sont versées dans les rivières et les mers, et ils sont donnés aux habitants du monde. </div> </div> </div> <div id = "test3"> <div> <div id = "test3_child"> J'ai un pot de vin qui suffit pour réconforter la poussière. Toutes les rivières et les mers sont versées dans les rivières et les mers, et ils sont donnés aux habitants du monde. </div> </div> </div> </div> </ body> </html>
Le test peut être obtenu, mais Test2_child ne peut pas être obtenu. Compte tenu de cette situation, j'ai écrit une méthode pour le résoudre moi-même.
Solution:
1. Obtenez l'élément (prenez la largeur et la hauteur) tous les éléments d'ancêtre cachés jusqu'à l'élément corporel, y compris vous-même.
2. Obtenez les propriétés d'affichage et de visibilité de tous les éléments cachés et enregistrez-les.
3. Définissez tous les éléments cachés sur la visibilité: cachée; affichage: Block! Important; (La raison de l'importance est d'éviter une priorité insuffisante).
4. Obtenez la largeur et la hauteur de l'élément (prenez la largeur et la hauteur).
5. Restaurez les propriétés d'affichage et de visibilité du style de tous les éléments cachés.
6. Renvoie la largeur de l'élément et la valeur de hauteur.
Implémentation du code:
function getSize (id) {var largeur, hauteur, elem = document.getElementById (id), nonodes = [], nœudyle = []; getNonenode (elem); // Obtenez l'élément de l'affichage multicouche: aucun; setNodestyle (); largeur = elem.clientwidth; hauteur = elem.clientHeight; Ressumenodestyle (); return {width: width, height: height} function getNonenode (node) {var affichez = getStyles (node) .getPropertyValue ('affiche'), tagname = node.nodename.tolowercase (); if (display! = 'non' && tagname! = 'body') {getNonenode (node.parentNode); } else {nonodes.push (node); if (tagName! = 'body') getNonenode (node.parentNode); }} // Cette méthode peut obtenir s'il existe le paramètre de propriété d'affichage final et ne peut pas être style.display. Fonction GetStyles (elem) {// Prise en charge: c'est-à-dire <= 11 +, firefox <= 30 + (# 15098, # 14150) // je lance des éléments créés dans les fenêtres contextuelles // ff lance en attendant les éléments de trame via "DefaultView.getCompupedStyle" var View = elem.ownerDocument.defaultView; if (! View ||! View.Openner) {View = Window; } return View.getCompuledStyle (elem); }; fonction setNodestyle () {var i = 0; for (; i <nonodes.length; i ++) {var Visibility = nonodes [i] .style.Visibilité, affiche = nonodes [i] .style.display, style = nonodes [i] .getAttribute ("style"); // Écraser d'autres styles d'affichage non enodes [i] .setAttribute ("style", "Visibilité: caché; affichage: block! IMPORTANT;" + style); NODESTYLE [I] = {Visibilité: Visibilité, affichage: affichage}}} fonction ResumeNodestyle () {var i = 0; for (; i <nonodes.length; i ++) {nonodes [i] .style.visibilité = nodyle [i] .visibilité; nonodes [i] .style.display = nœudyle [i] .display; }}}Exemple de démonstration:
var testSize = getSize ('test'); console.log ("test-> width:" + testsize.width + "hauteur:" + testsize.height); var test2ChildSize2 = getSize ('test2_child'); console.log ("test2child2-> width:" + test2childSize2.width + "height:" + test2child. test3ChildSize = getSize ('test3_child'); console.log ("test3_child-> largeur:" + test3childSize.width + "hauteur:" + test3childSize.height); // La valeur d'impression est la suivante Test-> Largeur: 417 Hauteur: 18test2child2-> Largeur: 417 Hauteur: 18test3_child-> Largeur: 417 Hauteur: 18Notes:
1. Ouvrez tous les éléments d'ancêtre cachés et obtenez la largeur et les valeurs de hauteur de l'élément. Dans certains cas, il peut être incorrect d'obtenir la valeur.
PS: Mais ne vous inquiétez pas, piratez simplement la méthode lorsque quelque chose ne va pas vraiment.
2. La raison pour laquelle l'élément ancestral caché et les attributs de visibilité doivent être retrouvés plus tard sans s'affecter.
3. De plus, la méthode GetStyles est extraite du code source jQuery, afin que cette méthode puisse obtenir s'il existe le paramètre d'attribut d'affichage final.
PS: ne peut pas être obtenu à partir de style.display.
La méthode ci-dessus pour obtenir des éléments cachés dans JS est tout le contenu partagé par l'éditeur. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.