jQuery .css retourne la propriété css en pixels, quand elle est réellement en pourcentages

Je vais essayer d'obtenir la valeur de la left de propriété (en%) à l'aide de la .css méthode jQuery:

var my_value= $("div").css("left");

Problème est, le ci-dessus retourne dans pixles...

Aucune idée sur comment je pourrais obtenir le retour de la réelle valeur de la propriété (qui est en pourcentages)?

source d'informationauteur

  1. 17

    Si vous faites une demande left en ligne, vous pouvez y accéder directement à partir de style.leftpar exemple:

    var my_value = $("div")[0].style.left;

    Pour moi, sur Firefox, IE et Opera, qui renvoie le pourcentage de la valeur là où css retourne le nombre de pixels. (Sur Chrome, j'ai un pourcentage de toute façon.)

    Si vous faites une demande left via une feuille de style, je ne crois pas qu'il y a tout pratique façon à obtenir l'information que vous cherchez. Vous peut l'obtenir, mais c'est vraiment gênant: En regardant à travers tous le style défini des règles, à comprendre ceux qui s'appliquent à l'élément, et de l'analyse du texte de règle. Vous pouvez accéder aux feuilles de style via document.styleSheetsqui est un tableau de toutes les feuilles de style pour le document. Chaque feuille de style sera un ensemble de règles qu'il définit sont disponibles soit cssRules ou rules (selon le navigateur). Chaque règle a une cssText propriété qui vous donne le texte de la règle.

    $.each(document.styleSheets, function(sheetIndex, sheet) {
    $.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
        var ruleText = rule.cssText;

        //Figure out if the rule applies, and parse out the value
    });
});

    Pas facile d'obtenir toutes les règles CSS de la spécificité et de droit, mais possible, et pas particulièrement difficile pour les cas les plus simples.

    Pour le style en ligne des trucs, voici une démo en live - Dans la démo, j'ai un positionnement absolu div avec left définie par un inline style et top défini par une feuille de style (donc pas inline).

    À L'Aide De Google Chrome 16:

    css('left') dit: 20% 
style.de gauche dit: 20% 
css('top') dit: 10% 
style.haut dit:

    À L'Aide De Firefox 10:

    css('left') dit: sont chiffrés à 193,2 px 
style.de gauche dit: 20% 
css('top') dit: 73.5 px 
style.haut dit:

    À l'aide de IE9:

    css('left') dit: 239.8 px 
style.de gauche dit: 20% 
css('top') dit: 59.3 px 
style.haut dit:

    La raison style.top est toujours vide, c'est que style ne reflète inline styles, mais je l'ai inclus pour l'intégralité.

  2. 5

    Juste eu ce problème et a réussi à obtenir de cette façon:

    $('#mySelector').get(0).style.width;

    retourné me '100%'

    cependant $('#mySelector').css('width');

    retourné me '900px'

    Espère que cela aide quelqu'un

  3. 4

    Mise à jour: dans IE 11, style.gauche ne fonctionne plus. Si vous tentez d'accéder de style en ligne, utilisez le prop() la fonction, puis spécifiez l'attribut spécifique que vous cherchez comme une clé du tableau:

    $("selector").prop("style")["left"];

    sera de retour à votre

  4. 2

    Je ne pense pas qu'il est possible d'obtenir la largeur retourné comme un pourcentage, comme le navigateur ne les mathématiques à l'interne, puis seulement vous permet d'accéder à la px valeur.

    Vous pouvez toutefois, le pourcentage une fois que vous savez la largeur de l'élément, et la largeur de la contenant de l'élément, comme ceci:

    var elWidth = $('#myElement').width();
var containerWidth = $('#myContainer').offsetParent().width();
var elWidthPercent = 100 * elWidth / containerWidth;