Changing CSS Properties of HTML element using JQuery
Changing CSS properties at runtime or at some event is the most common need of any website/application. JQuery offer us a list of functions that practically allows us to set any CSS property of any HTML element. Using JQuery, We can modify a document appearance very easily by changing the CSS properties of any HTML element in your page.
Change CSS properties using JQuery
With JQuery, CSS properties are changed using .CSS method. This method takes two inputs: CSS Property name followed by the value. Value can be a number, string or a function. If a function is passed as this parameter, it will be called for each element of the wrapped set where the return value will be the value of the CSS property. Below is the notation
.css('property','value')
JQuery also have the notation to change multiple CSS properties in one method declaration. Multiple CSS properties are set using comma separated delimiters wherein each property name is followed by the property value separated by colon. Below is the exact notation
.css({property1: 'value1', 'property-2': 'value2'})
Demo:
For this demo, I have three div elements, few paragraph elements, few hyperlinks and few buttons on click of which we would change CSS properties of our HTML elements.
HTML
<h3>Demo: Css Element</h3>
<div id="switcher">
<div class="HW">
Change Height & Width</div>
<div id="increase">
Increase Size</div>
<div id="decrease">
Decrease size</div>
</div>
<p class="P1">This is Paragraph 1.</p>
<p>This is Paragraph 2.</p>
<p id="P3">This is Paragraph 3.</p>
<a id="link" href='https://www.google.com'>Google.com</a><br /><br />
<input type="button" value="Change Font Size" onclick='ChangeFontSize();'/>
<input type="button" value="Change Height Width" onclick='ChangeHeightWidth();' />
<input type="button" value="Change Border Padding" onclick='BorderPadding();' />
<input type="button" value="Set Background" onclick='SetBG();' />
Script:
Below is the associated JQuery code. On click of first button, we change the font size of div elements using the below JQuery code.
function ChangeFontSize() {
// $("[id$=increase]").css("font-size", "xx-large");
$("#increase").css("font-size", "xx-large");
$("#decrease").css("font-size", "xx-small");
$("#link").css("cursor", "pointer");
}
On click of second button, we change the width and height of div and paragraph element using the below code. Please note the third paragraph is changed using the return value of a function.
function ChangeHeightWidth() {
$(".HW").css( 'width': '120px', 'height': '80px' );
$(".P1").width(100);
$("#P3").css("height", function () {
return $(".HW").height() + 50 + "px";
});
}
On click of third button, we change the border style, padding and margin of paragraph and div element using below JQuery code. Please note I have used both methods of changing multiple CSS properties in a single statement.
function BorderPadding() {
$('p:even').css( 'padding': '30px', 'border': '3px', 'border-style': 'dashed' );
$('#increase').css("margin", "30px").css("border", "5px").css(