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

Question

I got 3 buttons-links triggering some javascript code, with indication if certain button is selected, selected button got style attribute set to

"btn brown selected"

while other buttons got this attribute set to

"btn brown"

only one button can be selected at one time, each of buttons got different unique id, my question is how using jquery access certain button to modify it's style attr. What i need its only how to access by id single button and modify its style attribute to get immediate update on the screen

You can set class attributes to "btn brown selected" and not style attributes. — Udochukwu Enwerem
– Udochukwu Enwerem, Commented May 21, 2022 at 6:55

MaxiWheat · Accepted Answer · 2013-06-17 22:51:39Z

51

Use the CSS function from jQuery to set styles to your items :

$('#buttonId').css({ "background-color": 'brown'});

edited Jun 17, 2013 at 22:51

answered Sep 22, 2009 at 1:48

MaxiWheat

6,2497 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jay Stevens Over a year ago

better answer, imho. More cleanly articulated without the editorial commentary. +1

Mayank Over a year ago

Another example to change background as well as text color: $('#MySpanTag').css({ "background-color": 'orange', "color": 'red' }); span in asp.net mvc razor cshtml: <span id="MySpanTag" style="color:Green"> @ViewBag.MySpanTagMessage </span>

cletus · Accepted Answer · 2009-09-22 01:49:06Z

40

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?

answered Sep 22, 2009 at 1:49

cletus

627k169 gold badges922 silver badges945 bronze badges

Comments

Andrew Barber · Accepted Answer · 2012-12-24 16:07:27Z

2

$("span").mouseover(function () {
$(this).css({"background-color":"green","font-size":"20px","color":"red"});
});

<div>
Sachin Tendulkar has been the most complete batsman of his time, the most prolific     runmaker of all time, and arguably the biggest cricket icon the game has ever known. His batting is based on the purest principles: perfect balance, economy of movement, precision in stroke-making.
</div>

edited Dec 24, 2012 at 16:07

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

answered Dec 24, 2012 at 15:59

user1798002

331 silver badge6 bronze badges

1 Comment

Andrew Barber Over a year ago

Thanks for posting your answer! Please be sure to read the FAQ on Self-Promotion carefully. Also note that it is required that you post a disclaimer every time you link to your own site/product.

Udochukwu Enwerem · Accepted Answer · 2022-05-21 07:10:33Z

0

The question was misleading by confusing the html style attribute and css attributes.

However, if you want to actually modify the style attribute of an html element using jQuery, just reassign the entire style attribute like this:

<div id="mydiv" style="position:absolute; right:0; display:block;">
</div>

<script>
    // change position to relative and remove "right" and "display" css attributes
    $('#mydiv').attr("style", "position:relative;");
</script>

answered May 21, 2022 at 7:10

Udochukwu Enwerem

2,8932 gold badges28 silver badges37 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related