Est-il possible d'utiliser jQuery pour obtenir la largeur d'un élément en pourcentage ou en pixels, en fonction de ce que le développeur a spécifié avec CSS?

Question

J'écris un plugin jQuery et je dois pouvoir déterminer la largeur d'un élément spécifié par l'utilisateur. Le problème est que .width () ou .css ('width') signalera toujours les pixels exacts, même si le développeur l’a attribué, par exemple width: 90% avec CSS.

Existe-t-il un moyen de faire en sorte que jQuery affiche la largeur d'un élément en px ou% en fonction de ce que le développeur lui a donné avec CSS?

Answer 1

Je dirais que le meilleur moyen est de le calculer vous-même:

 var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width();
var percent = 100*width/parentWidth;
 

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 .

Answer 3

La façon de le faire est documenté dans cette stackoverflow question.

http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript

La seule chose que vous devez savoir est dans lequel la feuille de style est la classe ou d'une boucle sur toutes les feuilles de style. La fonction suivante vous donne toutes les fonctionnalités de la classe, il serait facile de faire une regex pour extraire la fonction que vous recherchez.

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {

        if(classes[x].selectorText==className) {
                (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
        }
    }
}
getStyle('.test');

Answer 4

Pour mes besoins, j'ai extrapolé la réponse de MД БДLL.

N'oubliez pas que je ne travaille qu'avec des pourcentages entiers.

     var getPercent = function(elem){
        var elemName = elem.attr("id");
        var width = elem.width();
        var parentWidth = elem.offsetParent().width();
        var percent = Math.round(100*width/parentWidth);
        console.log(elemName+"'s width = "+percent+"%");
    }

    getPercent($('#folders'));
    getPercent($('#media'));
    getPercent($('#player'));