Comment modifier les propriétés CSS d'éléments HTML en utilisant javascript ou jquery

Question

Comment puis-je changer de CSS javascript.

J'utilise et je veux jQuery-ui Dialog changer le style d'un javascript de DIV.

Merci

Answer 1

Consultez la documentation jQuery . Si vous voulez quelque chose, ce sera là.

Quoi qu'il en soit, si vous voulez ajouter des styles à des éléments, vous devez utiliser la fonction css, qui a quelques variantes.

$(selector).css(properties);  // option 1
$(selector).css(name, value); // option 2

Donc, si vous avez un DIV avec ID de « mydiv » et que vous voulez faire l'arrière-plan rouge, vous feriez

$("div#mydiv").css({'background-color' : 'red'}); // option 1
$("div#mydiv").css('background-color','red');     // option 2

La première est plus facile si vous configurez plusieurs choses à la fois.

Si vous voulez vérifier quelle propriété est actuellement définie sur, vous pouvez utiliser une variante de la 2ème option, juste omettre la valeur.

var color = $("div#mydiv").css('background-color');

Feraient le var être color si vous définissez red déjà ci-dessus, par exemple.

Vous pouvez également ajouter et supprimer des classes, faire quelque chose comme

$(selector).addClass(class_name);
$(selector).removeClass(class_name);

Answer 2

Cette réponse fonctionne même sans jQuery.

Vous avez quelque chose comme ceci:

<style type="text/css">
    .foo { color: Red; }
    .bar { color: Blue; }
</style>
<div class="foo" id="redtext"> some red text here </div>

Si vous souhaitez changer seulement quelques attributs, vous pouvez toujours trouver l'élément en utilisant

var div = document.getElementById('redtext');

fonction, puis changer le style de couleur attachée par

div.style.color = 'Green';

Faire apparaître votre texte rouge au vert à la place.

Si vous voulez changer la classe définie pour la div à une autre classe de style, vous pouvez faire:

div.className = 'bar';

faire la div maintenant utiliser la barre de classe, ce qui rend votre bleu de texte précédemment vert.

Answer 3

Il y a deux façons de manipuler des éléments styles à l'aide du framework jQuery. Jetez un oeil à travers la documentation relative aux propriétés CSS et le changement:

• http://docs.jquery.com/Attributes/addClass#class
• http://docs.jquery.com/CSS

Answer 4

Essayez this.This est le code jquery.

 $("myDiv").css({"color":"red","display":"block"})

Si vous utilisez javascript à la vanille, essayez ceci.

var myDiv = document,getElementById("myDiv");

myDiv.style.display = "block";

myDiv.style.color = "red";