IP Girl
  1. IP Girl
  3. 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?
Intereting Posts
Rendre le type personnalisé “tie-capable” (compatible avec std :: tie) Pourquoi deux chaînes séparées par un espace concaténent-elles dans Ruby? Regex: pour extraire une sous-chaîne entre deux balises dans une chaîne Le moyen le plus rapide de vérifier si une liste contient une chaîne unique Ajout de boutons radio personnalisés dans Android Y a-t-il un moyen de «limiter» le résultat avec ELOQUENT ORM de Laravel? Couleurs incorrectes avec vim dans iTerm2 avec Solarized Pourquoi les mots de passe en texte brut sont-ils mauvais et comment convaincre mon patron que ses sites Internet précieux sont en danger? Comment augmenter la taille de la police dans l’éditeur Xcode? Que fait git blame? Le profil ne correspond pas à la valeur du fichier de droits d’access pour le droit à l’identificateur d’application Trouver la longueur (taille) d’un tableau en jquery Meilleure approche pour concevoir des bibliothèques F # à utiliser à la fois avec F # et C # SyncAdapter sans ContentProvider Comment utiliser la liaison de données avec Fragment

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’) rapporteront toujours des pixels exacts, même si le développeur lui a atsortingbué, par exemple, la largeur: 90% avec CSS.

Est-il possible de faire en sorte que jQuery affiche la largeur d’un élément en px ou en% selon ce que le développeur lui a donné avec CSS?

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;

C’est tout à fait possible!

Vous devez d’abord masquer () l’élément parent. Cela empêchera JavaScript de calculer des pixels pour l’élément enfant. 

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

Voir mon exemple .

Je pense que vous pouvez utiliser l’access à l’object feuille de style (“style”) directement. 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 être capable de le faire est de déterminer la largeur d’un élément que l’utilisateur spécifie … [Y at-il un moyen de] afficher la largeur d’un élément en px ou% en fonction de ce que le développeur lui a donné 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 peut être plus portable / universelle, je ne sais pas). Encore une fois, il ne cherche pas à «obtenir un%» .

La manière 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

Pour mes fins, j’ai extrapolé la réponse de MäΓΓБLLLL.

Gardez à l’esprit 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'));

Si vous souhaitez réaffecter le pourcentage d’éléments d’origine à un nouveau pourcentage, il est recommandé de définir cette valeur dans CSS et de modifier l’identificateur d’éléments d’une certaine manière (classe, ID, etc.) pour refléter la nouvelle définition CSS. Cela 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 autre): 

 $('.myClass').removeClass('myClass').addClass('myNewClass');

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 pouvez donc l’utiliser dans les calculs

Si sa valeur à l’aide de la balise de style, vous pouvez simplement utiliser .prop ()
par exemple $ (‘. selector’). prop (‘style’). width.replace (‘%’, ”)

J’ai récemment rencontré ce problème et je ne voulais vraiment pas faire le travail supplémentaire qui consistait à obtenir la largeur du parent et à calculer le pourcentage.

Après quelques tentatives rapides, voici ce que j’ai: 

  $($($(table).find('tr')[0]).find('td')).each(function (i, e) { var proptW = $(e).prop("style").width; console.log(proptW); });

Donc, je pense que c’est le moyen le plus proche d’utiliser jQuery pour obtenir la valeur de la largeur d’un élément en fonction de ce que le développeur a spécifié dans le CSS.

Comme vous pouvez le voir, j’ai une table et je dois récupérer les largeurs pour chacune des colonnes.

Nous ne pouvons pas obtenir la valeur spécifiée par le développeur (DSV) directement avec la méthode jQuery, mais après avoir combiné avec la méthode intégrée de JavaScript, il ne vous rest plus qu’à obtenir la version DSV.

Comme le DSV est dans Style et que Style est une propriété d’un élément, nous pouvons donc utiliser la méthode jQuery: prop () pour l’obtenir. Cette méthode renvoie l’object style (par exemple sty), de sorte que nous pouvons appeler sty.width pour obtenir directement le DSV.

Ce n’est pas la manière pure de jQuery de l’obtenir, mais c’est assez simple et fonctionne pour moi.

J’espère que ça aide.

À votre santé,