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

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

thanks in advance MTH

jqueryhtmlcss


Solution 1:[1]

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

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

Solution 2:[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>

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Andrew Barber
Solution 3 Udo E.

Related Questions