web-dev-qa-db-fra.com

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

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 en pixels?

Merci.

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

Cependant, cette approche fonctionnerait dans les cas les plus simples (une feuille de style, plusieurs déclarations de feuille de style distinctes dans la balise head du document).

jquerycss
96
montrealist

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')) ) + '%';
48
Adam Lassek

Moyen le plus facile

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

// >>> "65%"
110
redexp

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

Mettre à jour:

Bon mot

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

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

Voir un exemple de one-liner .

Je suis ouvert à de meilleures idées!

82
timofey

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

En retard, mais pour les nouveaux utilisateurs, essayez ceci si le style CSS contient un pourcentage :

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

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é Adams answer directement, cela n’avait pas fonctionné (je suis quelque chose comme 64.93288590604027). :)

8
Leonard Pauli

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 pour quelqu'un.

3
Gregory Magarshak

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

Je voulais simplement relier les deux questions afin que d’autres puissent tirer parti des conclusions ultérieures.

1
Horst Walter

Je suis en train de réécrire le commentaire user1491819 comme réponse et en ajoutant une petite amélioration (je ne peux pas commenter en raison de la faible réputation).

user1491819 a créé cette fonction très utile:

function getCssWidth(childSelector) {
  return jQuery(childSelector).parent().clone().hide().find(childSelector).width();
}

Mais cette fonction renvoie le nombre de pixels ou le pourcentage sans unités, vous devez donc deviner lequel est . Pour ne pas deviner, vous pouvez utiliser css ('width') et elle renverra également l'unité . pour obtenir la valeur avec les unités doit être:

function getCssWidth(childSelector) {
  return jQuery(childSelector).parent().clone().hide().find(childSelector).css('width');
}
0
Desarrollo BlueSoft

Vous pouvez utiliser la fonction css (width) 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/

0
user267867

Il n'y a rien dans jQuery et rien de simple, même en javascript. En prenant la réponse de timofey et en l’utilisant, j’ai créé cette fonction qui permet d’obtenir les propriétés souhaitées: 

// 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
}
0
B T

Conversion de pixels en pourcentage à l'aide de la multiplication croisée. 

Configuration de la formule:  

1.) (Element_width_pixels/parent_width_pixels) = (element_width_percentage/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>
0
Zachary Horton

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

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

Ensuite, il devrait être possible (bien que pas nécessairement facile) d’écrire une fonction js pour tout analyser dans les balises de style de l’en-tête du document et renvoyer la valeur requise.

0
wheresrhys