CSS convertir % de pixels

J'ai "div" élément avec la largeur et la hauteur spécifiées exprimé en pourcentage en CSS.
Je voudrais passer par JS script sa largeur et sa hauteur, exprimée en pixels. Il est même possible?

Je veux obtenir un parent de la hauteur en px et utiliser cette valeur pour générer reste de ma page
Je sais ce que vous voulez, qu'avez-vous essayé?

OriginalL'auteur Jacek | 2012-08-28

  1. 5

    Vous pouvez utiliser

    el.clientHeight;
el.clientWidth;

    (elest une référence à l'élément)

    Démo

    Noter que ces propriétés ont d'abord été introduit dans le MS IE modèle d'objet DHTML. Plus récemment, ils ont été normalisés dans CSSOM Module voir, W3C Working Draft 22 février 2008.

    Ces propriétés ont été largement pris en charge. Cependant, il est possible qu'un vieux non MS compatible navigateur ne les supporte pas. Dans ces cas, vous pouvez utiliser getComputedStyle:

    function findSize(el, size) {
    /* size must be 'width' or ' height' */
    return window.getComputedStyle
        ? getComputedStyle(el,null).getPropertyValue(size)
        : el['client'+size.substr(0,1).toUpperCase() + size.substr(1)] + 'px';
}
findSize(el, 'width');
findSize(el, 'height');

    Démo

    Prise en charge du navigateur de getComputedStyle et clientHeight/clientWidth façon est d'au moins:

                     | IE  | Firefox | Chrome | Safari | Opera
----------------- | -----------------------------------------
getComputedStyle | 9   | <=3     | 1      | <=4    | <=10
client           | <=5 | <=3     | 1      | <=4    | <=10

    (<=n signifie qu'il est pris en charge au moins à partir de la version n, mais je ne pouvais pas tester les versions précédentes)

    clientHeight et clientWidth ne font pas partie des spécifications du w3c
    Je pensais que c'était inclus dans certains spec w3c après avoir été présenté par MS, mais je me trompais. De toute façon, les grands navigateurs prennent en charge.
    Les différents navigateurs montrant les différentes valeurs
    Maintenant, je vois clientWidth et clientHeight ont été définis dans CSSOM Vue du Module, le W3C Working Draft 22 février 2008.

    OriginalL'auteur Oriol

  2. 2

    Utilisation window.getComputedStyle() pour cette

    <div style="wdith:50%">50% width</div>​​​​​​​​​​​​​

(function() {
    var div = document.getElementsByTagName("div")[0];

    console.log(window.getComputedStyle(div, null)["width"]);
}())​

    violon

    Pris en charge par tous les principaux navigateurs et IE9+. Pour les versions antérieures d'IE ont un coup d'oeil à currentStyle

    Mais currentStyle retourne '50%'... Voir mon édité répondre
    Ouais, c'est wdith.

    OriginalL'auteur Andreas

  3. 1

    Ont un coup d'oeil à Ce.

    Le jQuery clé est :

    $("#div").width();
    Il n'a pas jQuery tag, donc je suppose qu'il n'utilise pas jQuery

    OriginalL'auteur ygssoni

  4. 0

    Le jQuery clé est :

    $("#div").largeur($("#div").width());

    OriginalL'auteur Shlomi Aharoni