Jquery to Change Style Attribute of a Div Class

jquery to change style attribute of a div class

Just try $('.handle').css('left', '300px');

Adding and removing style attribute from div with jquery

You could do any of the following

Set each style property individually:

$("#voltaic_holder").css("position", "relative");

Set multiple style properties at once:

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

Remove a specific style:

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Remove the entire style attribute:

$("#voltaic_holder").removeAttr("style")

jQuery changing style of HTML element

Use this:

$('#navigation ul li').css('display', 'inline-block');

Also, as others have stated, if you want to make multiple css changes at once, that's when you would add the curly braces (for object notation), and it would look something like this (if you wanted to change, say, 'background-color' and 'position' in addition to 'display'):

$('#navigation ul li').css({'display': 'inline-block', 'background-color': '#fff', 'position': 'relative'}); //The specific CSS changes after the first one, are, of course, just examples.

jQuery set CSS style of Class by using Data attribute

You need to use .css( propertyName, function )

A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

Also note it should be image not img

$('.circle-200').css('background-image', function() {
    return "url('" + $(this).data('image') + "')");
});

$('.circle-200').css('background-image', function() {  return "url('" + $(this).data('image') + "')"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="circle-200" data-image="pic1">pic1</div><div class="circle-200" data-image="pic2">pic2</div><div class="circle-200" data-image="pic3">pic3</div>

Use JQuery to change all element's css style in same class

css method iterates through the collection behind the scenes, there is no need to use a each loop. Also your markup is invalid, li element should be child of an ul/ol element. The div elements should be replaced with one of the above elements (although it won't be a semantic markup.)

It seems you only want to manipulate css properties of the parent element. If this is the case, you can use .closest() or .parent() method:

// Do not miss the `event` object if you want to use it
$('.Liregion2 a').click(function(event) { 
    $(this).closest('.Liregion2').css("background-color" , "transparent");
    event.stopPropagation(); 
});

As a suggestion avoid using inline styles, it makes the markup unmaintainable. You can declare CSS classes, and use jQuery removeClass and addClass methods for adding/removing them.

How to change style of a class inside Javascript?

$('demo') will return jquery object not a dom object also your selector is missing a ., use

 $('.demo').css('background-color ','black');

Reference: jquery css() doc.

How to modify STYLE attribute of element with known ID using JQuery

Not sure I completely understand the question but:

$(":button.brown").click(function() {
  $(":button.brown.selected").removeClass("selected");
  $(this).addClass("selected");
});

seems to be along the lines of what you want.

I would certainly recommend using classes instead of directly setting CSS, which is problematic for several reasons (eg removing styles is non-trivial, removing classes is easy) but if you do want to go that way:

$("...").css("background", "brown");

But when you want to reverse that change, what do you set it to?

---

Related Topics