récupère la valeur en pourcentage de la règle CSS dans jQuery

Question

Disons que la règle est la suivante:

.largeField {
    width: 65%;
}

Est-il un moyen d'obtenir des "65%" de retour en quelque sorte, et non pas la valeur du pixel?

Merci.

EDIT: Malheureusement, en utilisant les méthodes du DOM est pas fiable dans mon cas, comme j'ai une feuille de style qui les importations d'autres feuilles de style, et comme un résultat de la cssRules paramètre se termine avec la valeur null ou undefined valeur.

Cette approche, cependant, serait de travailler dans la plupart des cas simples (une feuille de style, plusieurs feuille de style distincte des déclarations à l'intérieur de la tête de la balise du document).

Answer 1

Moyen le plus facile

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

// >>> "65%"
 

Answer 2

C'est très certainement possible!

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

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

Voir mon exemple .

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

Answer 3

Il n'y a pas de méthode intégrée, j'en ai bien peur. Vous pouvez faire quelque chose comme ça:

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

Answer 4

Vous pouvez accéder à l'objet document.styleSheets :

 <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>
 

Answer 5

Un plugin jQuery basé sur Adams répond:

 (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());​​​​​
 

Reviendra '65% '. Renvoie uniquement les nombres arrondis pour qu'ils fonctionnent mieux si vous aimez if (width == '65%'). Si vous aviez utilisé la réponse Adams directement, cela n’avait pas fonctionné (je suis quelque chose comme 64.93288590604027). :)