Disons que la règle est la suivante:

.largeField {
    width: 65%;
}

Existe-t-il un moyen de récupérer «65%» d'une manière ou d'une autre, et non la valeur de pixel?

Merci.

EDIT: Malheureusement, l'utilisation des méthodes DOM n'est pas fiable dans mon cas, car j'ai une feuille de style qui importe d'autres feuilles de style, et par conséquent, le paramètre cssRules se termine par null ou non défini valeur .

Cette approche, cependant, fonctionnerait dans la plupart des cas simples (une feuille de style, plusieurs déclarations de feuille de style distinctes à l'intérieur de la balise head du document).

Il n'y a pas de moyen intégré, j'en ai peur. Vous pouvez faire quelque chose comme ceci:

var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

Le moyen le plus simple

$('.largeField')[0].style.width

// >>> "65%"

C'est très certainement possible!

Vous devez d'abord masquer () l'élément parent. Cela empêchera JavaScript de calculer les pixels de l'élément enfant.

$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);

Voyez mon exemple .

Maintenant ... je me demande si je suis le premier à découvrir ce hack :)

Mettre à jour:

Bon mot

element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');

Il laissera un élément caché avant la </body>balise, ce que vous voudrez peut-être .remove().

Voir un exemple de one-liner .

Je suis ouvert à de meilleures idées!

Vous pouvez accéder à l' document.styleSheetsobjet:

<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script type="text/javascript">
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; i < rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

En retard, mais pour les utilisateurs plus récents, essayez ceci si le style css contient un pourcentage :

$element.prop('style')['width'];

Un plugin jQuery basé sur la réponse Adams:

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
        return Math.round(100*width)+'%';
    };

})(jQuery);

$('body').html($('.largeField').getWidthInPercent());​​​​​

Renvoie «65%». Ne renvoie que des nombres arrondis pour mieux fonctionner si vous aimez if (width == '65%'). Si vous aviez utilisé directement la réponse d'Adams, cela n'avait pas fonctionné (j'ai obtenu quelque chose comme 64,93288590604027). :)

S'appuyant sur l'excellente et surprenante solution de timofey, voici une implémentation purement Javascript:

function cssDimensions(element)
  var cn = element.cloneNode();
  var div = document.createElement('div');
  div.appendChild(cn);
  div.style.display = 'none';
  document.body.appendChild(div);
  var cs = window.getComputedStyle
    ? getComputedStyle(cn, null)
    : cn.currentStyle;
  var ret = { width: cs.width, height: cs.height };
  document.body.removeChild(div);
  return ret;
}

J'espère que c'est utile à quelqu'un.

J'ai un problème similaire dans Obtenir les valeurs de la feuille de style globale dans jQuery , j'ai finalement trouvé la même solution que ci-dessus .

Je voulais juste croiser les deux questions afin que d'autres puissent bénéficier des résultats ultérieurs.

Vous pouvez mettre les styles auxquels vous avez besoin d'accéder avec jQuery soit dans:

1. la tête du document directement
2. dans un include, quel script côté serveur met ensuite dans la tête

Ensuite, il devrait être possible (mais pas nécessairement facile) d'écrire une fonction js pour analyser tout ce qui se trouve dans les balises de style dans l'en-tête du document et renvoyer la valeur dont vous avez besoin.

Vous pouvez utiliser la fonction css (largeur) pour renvoyer la largeur actuelle de l'élément.

c'est à dire.

var myWidth = $("#myElement").css("width");

Voir aussi: http://api.jquery.com/width/ http://api.jquery.com/css/

Il n'y a rien dans jQuery, et rien de simple même en javascript. En prenant la réponse de timofey et en courant avec elle, j'ai créé cette fonction qui fonctionne pour obtenir toutes les propriétés que vous voulez:

// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for 
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties) {
    if(!(properties instanceof Array)) properties = [properties]

    var parent = domNode.parentNode
    if(parent) {
        var originalDisplay = parent.style.display
        parent.style.display = 'none'
    }
    var computedStyles = getComputedStyle(domNode)

    var result = {}
    properties.forEach(function(prop) {
        result[prop] = computedStyles[prop]
    })

    if(parent) {
        parent.style.display = originalDisplay
    }

    return result
}

Conversion de pixels en pourcentage en utilisant la multiplication croisée .

Configuration de la formule:

1.) (element_width_pixels / parent_width_pixels) = (element_width_pixels / 100)

2.) element_width_percentage = (100 * element_width_pixels) / parent_width_pixels

Le code actuel:

<script>

   var $width_percentage = (100 * $("#child").width()) / $("#parent").width();

</script>