L'obtention d'un élément hauteur intérieure

Comment obtenez-vous un élément de hauteur intérieure, sans rembourrage et les frontières?

Pas de jQuery, juste pur JS, et une solution de navigateur (IE7 inclus)

L'obtention d'un élément hauteur intérieure

  • Pourquoi ne pas utiliser border-box en css? De cette façon, vous n'avez pas à vous soucier de ces choses... Alors vous pouvez utiliser offsetHeight qui sera de retour à la bonne hauteur sans la marge.
  • c'est une question très précise d'un plugin, je fais qui n'a pas de CSS de contrôle, j'ai juste eu à travailler avec ce que j'ai obtenu
  • Alors...je suppose que vous pouvez toujours définir la box-sizing: border-box, il va vous faire économiser du temps et des maux de tête.
  • Je ne peux pas, parce que mon plugin fonctionne sur les autres sites, sur lesquels il n'est pas à moi de changer leur CSS paramètres d'une façon qui puisse nuire à la conception
  • element.style.boxSizing = 'border-box';
  • Ne sais pas quel genre de plugin, mais je ne vois pas pourquoi vous ne devriez pas l'utiliser uniquement sur cet élément, je veux dire que vous n'êtes pas changer de CSS d'autres que ce qui est nécessaire pour votre plugin fonctionne.
  • oui, MAIS ce css paramètre n'est pas pour les vieux IE, et aussi, il pourrait y avoir un autre code qui fonctionne avec la page web qui pourrait mal calculer des choses, si j'ai un début de changement de CSS. c'est TOUJOURS une mauvaise idée. ne jamais changer, ne fonctionnent qu'avec ce que vous avez quand ce n'est pas votre propre site web
  • Peut-être que vous pourriez cloner l'élément, changer la box-sizing, puis calculer cela?
  • en gros une bonne idée, MAIS très lent chose à faire dans mon cas, car j'en ai besoin calculée sur chaque événement scroll. le clonage va tuer les performances de mon plugin, que j'essaie de l'améliorer.

InformationsquelleAutor vsync | 2012-11-17
  1. 31
    var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");

    La version ci-dessus va travailler dans les navigateurs modernes. Veuillez vérifier currentStyle pour IE navigateurs.

    • tu veux dire: parseInt(style.getPropertyValue('height'));
    • Internet Explorer sera de retour "auto" si il n'y a pas de hauteur dans le css jsfiddle.net/Kxsvx de sorte que vous n'avez pas le la hauteur!
    • Internet Explorer?
    • Dans mon cas, IE8.
    • SOUVENEZ-vous: Si le box-sizing est fixé à border-box, vous aurez toujours de retirer le rembourrage et les valeurs limites.
    InformationsquelleAutor Rajkamal Subramanian
  2. 1

    Vous pouvez simplement utiliser la clientHeight et clientWidth propriétés.

    MDN doc web de l'Élément.clientHeight — clientWidth fonctionne exactement de la même manière.

    • Cela pourrait inclure rembourrage.
    InformationsquelleAutor Tilepaper
  3. 0

    MODIFIER des commentaires:

    http://jsfiddle.net/hTGCE/1/ (un peu plus de code que prévu)

    dans l'internet, vous trouverez des fonctions comme ceci: 

      function getRectangle(obj) {

          var r = { top: 0, left: 0, width: 0, height: 0 };

          if(!obj)
             return r;

          else if(typeof obj == "string")
             obj = document.getElementById(obj);


          if(typeof obj != "object")
             return r;

          if(typeof obj.offsetTop != "undefined") {

             r.height = parseInt(obj.offsetHeight);
             r.width  = parseInt(obj.offsetWidth);
             r.left = r.top = 0;

             while(obj && obj.tagName != "BODY") {

                r.top  += parseInt(obj.offsetTop);
                r.left += parseInt(obj.offsetLeft);

                obj = obj.offsetParent;
             }
          }
          return r;
       }

    si vous voulez soustraire le rembourrage /border-width est définie dans le css de fichiers et pas de dynamique dans l'attribut style:

        var elem = document.getElementById(id);
    var borderWidth = 0;

          try {
             borderWidth = getComputedStyle(elem).getPropertyValue('border-top-width');

             } catch(e) {

             borderWidth = elem.currentStyle.borderWidth;
          } 
    borderWidth = parseInt(borderWidth.replace("px", ""), 10);

    et avec le rembourrage de même. ensuite, vous devez calculer.

    • dans l'internet, vous pouvez trouver toutes sortes de détritus de code. Je veux LA réponse ULTIME de ce mystère, pas de ballonnement, ralentit le code..mais merci pour la réponse 🙂
    • si vous avez une dynamique de la hauteur sans un attribut css "hauteur" pour un élément de la méthode avec "getComputedStyle" ne fonctionne pas. Ou je me trompe?
    • il ne le travail, tout essayé
    • ok. je pensais que le code avec "getComputedStyle..." je viens de lire les attributs css et de ne pas le calculer si pas de "hauteur" existe.
    • j'ai donc essayer dans un violon et IE est spécial de nouveau: si il n'y a pas de hauteur, vous obtenez la valeur de l'auto: jsfiddle.net/Kxsvx
    • bon travail de détective Mic! IE8 et ci-dessous ne montrer que c'est laid visage ici. mais il DOIT y avoir une solution plus simple à cette simple chose..
    • eh bien, vous pouvez obtenir le rembourrage et des frontières et de la soustraire à la clientHeight de l'élément, je suppose.
    • peut-être que IE8 est allé dans quelques années 😀 mais assurez-vous sur les différences bitween les valeurs de innerHeight: stackoverflow.com/questions/833699/... je vais éditer ce post pour poster un petit code
    • Ce poste est à partir de 3 ans, et maintenant j'ai vérifié et ils sont tous les mêmes

    InformationsquelleAutor Mic
  4. -1

    j'ai eu le même problème et a trouvé qu'il y est pas natif de la croix-plattform solution, mais la solution est facile, mais

    var actual_h = element.offsetHeight;

            if(parseInt(element.style.paddingTop.replace('px','')) > 0){
                actual_h=actual_h -  parseInt(element.style.paddingTop.replace('px',''));

            }
            if(parseInt(element.style.paddingBottom.replace('px','')) > 0){
                actual_h=actual_h -  parseInt(element.style.paddingBottom.replace('px',''));

            }
    • Soyez avisé que, comme MDN membres, "La style propriété n'est pas utile pour l'apprentissage de l'élément de style en général, car il ne représente que les déclarations CSS définie dans l'élément inline style attribut [...]".
    • box-sizing ne fonctionne pas sous IE7
    InformationsquelleAutor john Smith