How to change css properties of html elements using javascript or jquery

Question

How can I change CSS from javascript .

I'm using jQuery-ui Dialog and I want to change the style of a DIV from javascript.

Thanks

Answer 1

Check out the jQuery documentation . If you want anything it will be there.

Anyhow, if you want to add styles to elements, you need to use the css function, which has a few variants.

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

So if you have a DIV with ID of "mydiv" and you want to make the background red, you would do

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

The first way is easier if you're setting multiple things at once.

If you want to check what a property is currently set to, you would use a variant of the 2nd option, just omit the value.

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

Would make the var color be red if you already set it above, for example.

You can also add and remove classes, doing something like

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

Answer 2

This answer works even without jQuery.

So you have something like this:

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

If you wish to change just some attributes, you can always find the element using

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

function and then change the attached color style by

div.style.color = 'Green';

Making your red text appear in green instead.

If you want to change the class defined for the div to another style class, you can do:

div.className = 'bar';

making the div now use class bar, which makes your previously green text blue.

Answer 3

There are a couple of ways to manipulate elements styles using the jQuery framework. Take a look through the documentation related to CSS and changing attributes:

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

Answer 4

Try this.This is jquery code.

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

If you are using vanila javacript,try this.

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

myDiv.style.display = "block";

myDiv.style.color = "red";