Pointer en jQuery sur Style

Ce sujet est résolu
862
,

Bonjour,

J’aimerai pouvoir agir dans une div et plus précisément dans la balise style d’une div.

J’imagine que cela pourrait être possible en jQuery, j’ai testé des trucs (je connais mal jQuery) mais je n’arrive pas a pointer sur la balise style. J’aimerai pouvoir intervenir sur le min-width ou même le supprimer.

Quand je regarde avec les outils dev de Firefox cette div est en élément inline.
L’ID mep est dynamique, le chiffre change suivant son conteneur.

<div id="mep_0" class="mejs__container mejs mejs-48 done mejs__video" tabindex="0" role="application" aria-label="Video Player" style="width: 684px; height: 384.75px; min-width: 17106px;">

Donc, comment puis je faire pour soit modifier ou supprimer le min-width ?

Merci à vous.

6 Réponse

17162
,

Bonjour.
Alors pour sélectionner un élément qui à une valeur dynamique d'un attribut, c'est plutôt simple avec jQuery, dans ton cas tu peux faire : $('[id^="mep_"]') ce qui se reporte à dire, sélectionner tous les éléments qui ont pour valeur de l'attribut id qui commence par mep_.
Ensuite pour sélectionner l'attribut style, il te suffit d'utiliser la méthode css en lui passant en premier argument le nom de la propriété sur laquelle tu veux agir et en second argument la valeur que tu veux lui définir.
Donc en exemple complet, voilà ce que ça pourrait donner :

$('[id^="mep_"]').css('min-width', '950px');

Par contre, attention, il ne faut pas que le code que tu nous montre soit placé dans un iframe ou tout autre container du même genre, car je ne pense pas que ça pourra fonctionner dans ce cas là.

44835
,

Avec la methode css tu n'arriveras pas à overrride le style inline
par contre tu peux aller modifier l'attribut "style"

    $('#mep_0').attr('style', function(i, lestyle)
        {
            return lestyle && lestyle.replace(/min-width[^;]+;?/g, ''); // efface uniquement la propriete min-width
        })

voir ici un fil qui en parle

17162
,

L'exemple que j'ai donné est tout à fait fonctionnel pour modifier une propriété dans un attribut style, le code que tu propose est en premier lieu incorrect, car :

L’ID mep est dynamique, le chiffre change suivant son conteneur.

Ensuite, il correspond en effet pour supprimer une propriété de l'attribut style, ce que je n'ai pas proposé, malgrès tout, dans l'aide qu'il demande, il a besoin de l'un ou l'autre, soit modifier la valeur de la propriété, soit de la supprimer, par conséquent je pense que mon exemple devrait lui suffir.

Avec la methode css tu n'arriveras pas à overrride le style inline

Au contraire, pour information, je ne propose jamais d'exemple sans en être certain et/ou sans l'avoir au préalable testé.
Je te demanderais donc d'éviter d'affirmer quelque chose que tu n'aurais pas testé avant, car que je sache, le titre du sujet auquel fait référence ton lieu, concerne la suppression d'une propriété d'un attribut style et non de la modification de sa valeur, en affirmant quelque chose que tu n'as pas testé, tu ne feras que faire douter la personne, ce qui ne l'aidera pas pour autant, au contraire.
En plus de ça, si tu consultes le sujet jusqu'au bout, tu y verras deux choses :

I'm not sure this is what you wanted. You wanted to override it, which, as pointed out already, is easily done by $('#element').css('display', 'inline').

Et :

Update: I now realized that all this is futile. You can simply set it to blank:
$('#element').css('display', '');

Donc, s'il souhaite supprimer la propriété min-width de l'attribut style, il peut très bien faire :

$('[id^="mep_"]').css('min-width', '');
44835
,

@lartark si tu pouvais mesurer le ton que tu emploies, le forum ne s'en porterait pas plus mal
Sinon effectivement je n'ai pas traité les id indicés car tu l'avais déjà traité, j'ai juste simplifié mon exemple en ne prenant que l'indice 0

Pour le .css() tu as egalement raison car css traite ça en modifiant l'attribut "style"
When using .css() as a setter, jQuery modifies the element's style property. For example, $( "#mydiv" ).css( "color", "green" ) is equivalent to document.getElementById( "mydiv" ).style.color = "green". Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property

l'idée de supprimer la propriété dans l'attribut "style" était bien sûr de la réécrire derrière
par exemple si la propriété est suivie de !important jquery ne la réécrit pas

862
,

Hello messieurs et grand merci à vous deux.

L’un m’a appris à sélectionner une ID dynamique, et l’autre à pouvoir éradiquer une balise…

Merci à vous, vous me donner l’envie de poursuivre dans la voie du jQuery

Default
,

L'exemple que j'ai donné est tout à fait fonctionnel pour modifier une propriété dans un attribut style, le code que tu propose est en premier lieu incorrect, car :