web-dev-qa-db-fra.com

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?

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. largeur: 90% avec CSS. 

Existe-t-il un moyen de permettre à jQuery d'afficher la largeur d'un élément en px ou en% en fonction de ce que le développeur lui a fourni avec CSS?

jquerycsswidth
49
joren

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;
84
Matt Ball

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 .

10
timofey

Je pense que vous pouvez utiliser directement l’accès aux objets de la feuille de style ('style'). Même alors, YMMV par navigateur. par exemple. Elm.style.width.

Modifier pour le commentaire de Peter :: Je ne cherche pas à "obtenir un%". Selon la question:

Je dois pouvoir déterminer la largeur d'un élément spécifié par l'utilisateur ... [existe-t-il un moyen de] afficher la largeur d'un élément en px ou en%, en fonction de ce que le développeur lui a fourni avec CSS?

J'ai donc fourni une alternative pour récupérer la valeur CSS "brute". Cela semble fonctionner sur FF3.6. YMMV ailleurs (la réponse de netadictos est peut-être plus portable/universelle, je ne sais pas). Encore une fois, ne cherche pas à 'obtenir un%'.

9
user166390

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

Comment lisez-vous les valeurs des règles CSS avec JavaScript?

La seule chose que vous devez savoir est dans quelle feuille de style est la classe ou la boucle à travers 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 fonctionnalité 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');
2
netadictos

Si vous souhaitez réaffecter le pourcentage d'éléments d'origine à un nouveau pourcentage, il est recommandé de définir cette valeur en CSS et de modifier l'identificateur d'éléments (class, id, etc.) pour refléter la nouvelle définition CSS. Ceci ne s'applique pas toujours si la nouvelle variable de pourcentage doit être variable.

.myClass{
    width:50%;
}

.myNewClass{
    width:35%;
}

Ajouter une suppression via cette méthode (ou une autre):

$('.myClass').removeClass('myClass').addClass('myNewClass');
1
Andrew Liles

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'));
1
Alan Mabry

Si son ensemble utilise une balise style, vous pouvez simplement utiliser .prop () 
par exemple. $ ('. sélecteur'). prop ('style'). width.replace ('%', '')

0
Jay Shah

juste pour le rendre plus jqueryish

ajoute ça

$.fn.percWidth = function(){
  return this.outerWidth() / this.parent().outerWidth() * 100;
}

et ensuite utiliser

$(selector).percWidth()

cela retournera la valeur en pourcentage sans le signe%, vous pourrez donc l'utiliser dans les calculs

0
Nick Ginanto