Comment modifier les propriétés CSS des éléments html en utilisant javascript ou jquery

Question

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

Merci

Answer 1

Check out the jQuery documentation. Si vous voulez quelque chose, il sera là.

De toute façon, si vous souhaitez ajouter des styles aux é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 immediatement.

Si vous voulez vérifier à quelle propriété est actuellement définie, vous devez utiliser une variante de la 2ème option, en omettant simplement la valeur.

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

Feraient le var color être red si vous avez déjà défini plus haut, par exemple.

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

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

Answer 2

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 CSS et les attributs changeants:

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

Answer 3

Cette réponse fonctionne même sans jQuery.

Vous avez donc 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 la fonction

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

puis changer le style de couleur ci-joint par

div.style.color = 'Green'; 

Rendre votre texte rouge apparaît en vert dans 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 4

Essayez ceci.Ceci est le code jquery.

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

Si vous utilisez vanila javacript, essayez ceci.

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

myDiv.style.display = "block"; 

myDiv.style.color = "red";