Il est tout à fait pratique d'obtenir la taille des éléments visibles de JS. Vous pouvez utiliser cette méthode directement:
La copie de code est la suivante:
fonction getDefaultStyle (obj, attribut) {// renvoie la fonction de style final, compatible avec IE et DOM, définit les paramètres: objet élément, caractéristiques de style
return obj.currentStyle? obj.currentStyle [attribut]: document.defaultView.getCompuledStyle (obj, false) [attribut];
}
Mais si cet élément est masqué (affichage: aucun) et que sa taille est inconnue adaptable, alors la méthode ci-dessus ne fonctionnera pas! Parce que l'élément Affichage: Aucun n'a pas de taille physique! La tragédie s'est produite comme ça!
Heureusement, il y a aussi la visibilité: cachée dans CSS, qui est invisible. La plus grande différence entre elle et l'affichage: aucune est cette visibilité: Hidden a une taille physique. Si vous avez des tailles physiques, vous pouvez obtenir la taille par la méthode ci-dessus, mais après avoir modifié l'affichage: aucun à la visibilité: caché, il y aura un espace vide sur la page. Même si vous changez de visibilité: caché à afficher: aucun immédiatement après avoir obtenu la taille, la partie de la page secouera toujours. Ensuite, la meilleure façon est de déplacer cet élément caché hors de l'écran ou du flux de documents (position: absolu). Cela semble parfait, mais la tragédie se reproduit. Si vous souhaitez afficher à nouveau cet élément, l'élément est invisible et la position n'est pas correcte, car c'est la visibilité de l'élément: caché; position: absolue. Donc, après avoir obtenu la taille, vous devez restaurer le style. Il s'agit de remettre les attributs de position et de visibilité au style d'origine.
Il s'agit de la mise en œuvre de base de JS pour obtenir la taille des éléments cachés. Si vous êtes intéressé, vous pouvez jeter un œil à la méthode dans le livre "compétent en javascript".
J'ai également fait une simple démo ici, vous pouvez vérifier le code source:
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS obtient la taille de l'élément caché </TITAL>
<style type = "text / css">
</ style>
<script type = "text / javascript" src = "http://www.css88.com/tool/css3preview/jquery-1.4.2.min.js"> </ script>
</ head>
<body>
<div id = "test_display_block" style = "affichage: aucun; bordure: 10px solide #cdcdcd; margin-left: 100px"> Il s'agit du conteneur de test, le conteneur visible <r /> Il s'agit du conteneur de test, le conteneur visible <r /> Il s'agit du conteneur de test, le contenant de la visière <Br /> Ceci est le conteneur de test, le contenu visible test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test conteneur, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le contesteur de test, le contenant de test, le conteneur de test, le contenu de test, le contenant de test, le conteneur, le conteneur de test, le contenu de testeur, le contenu de test, le contenant du contenu, le conteneur de teste conteneur de test, conteneur de test, conteneur de test, conteneur de test, conteneur de test, conteneur de test, conteneur de test, conteneur de test, conteneur de test, conteneur de test, conteneur de test, conteneur de test, le contenant de test, le contenant de test, le conteneur de test conteneur, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le contesteur de test, le contenant de test, le conteneur de test, le contenu de test, le contenant de test, le conteneur, le conteneur de test, le contenu de testeur, le contenu de test, le contenant du contenu, le conteneur de teste Le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le conteneur de test, le
<div id = "test_display_none" style = "affichage: aucun; bordure: 10px solide #cdcdcd"> Ceci est le conteneur de test, c'est le conteneur de test, <br /> Ceci est le conteneur de test, <br /> Ceci est le conteneur de test, <br /> div>
<div id = "test_display_click"> cliquez sur moi </div>
<script type = "text / javascript">
// juge le type d'objet
fonction getType (o) {
var _t;
return ((_t = typeof (o)) == "objet"? o == null && "null" || objet.prototype.tostring.call (o) .slice (8, -1): _ t) .tolowercase ();
}
// Obtenez le style d'élément
fonction getStyle (el, stylename) {
return el.style [stylename]? El.Style [Stylename]: El.CurrentStyle? el.currentStyle [Stylename]: window.getCompuledStyle (el, null) [Stylename];
}
fonction getstylenum (el, stylename) {
RETOUR PARSEINT (GetStyle (El, Stylename) .replace (/ px | pt | em / ig, ''));
}
fonction setStyle (el, obj) {
if (getType (obj) == "objet") {
pour (s dans obj) {
var cssarrrt = s.split ("-");
pour (var i = 1; i <cssarrrt.length; i ++) {
cssarrrt [i] = cssarrrt [i] .replace (cssarrrt [i] .Carat (0), cssarrrt [i] .charat (0) .toupperase ());
}
var cssarrtNew = cssarrrt.join ("");
el.style [cssarrtNew] = obj [s];
}
}
autre
if (getType (obj) == "String") {
el.style.csstext = obj;
}
}
fonction getSize (el) {
if (getStyle (el, "affiche")! = "Aucun") {
return {width: el.offsetwidth || Getstylenum (El, "largeur"), hauteur: el.offsetheight || getStylenum (el, "height")};
}
var _addcss = {affichage: "", position: "absolu", visibilité: 'cachée'};
var _oldcss = {};
for (i in _addcss) {
_oldcss [i] = getStyle (el, i);
}
setStyle (el, _Addcss);
var _width = el.clientwidth || getstylenum (el, "largeur");
var _Height = el.clientHeight || getstylenum (el, "hauteur");
for (i in _oldcss) {
setStyle (el, _oldcss);
}
return {width: _width, hauteur: _Height};
}
var dd = document.getElementById ("test_display_block");
alerte (getSize (dd) .Height);
document.getElementById ("test_display_click"). onclick = function () {
dd.style.display = "bloc";
document.getElementById ("test_display_none"). style.display = "bloc";
}
alert ($ ("# test_display_none"). height ());
</cript>
</docy>
</html>
Hors sujet: Généralement, le framework JavaScript et les bibliothèques ont encapsulé cette méthode. Par exemple, JQ, nous pouvons directement utiliser les méthodes HEAUGNE () et width () pour obtenir la taille des éléments cachés.