Tag Archives: jQuery css() Method

jQuery – Get and Set CSS Classes |jQuery css() Method|jQuery Manipulating CSS|Example Stylesheet | jQuery addClass() Method

  • With jQuery, it is easy to manipulate the CSS of elements.

jQuery Manipulating CSS :

jQuery has several methods for CSS manipulation. We will look at the following methods:

  • addClass() – Adds one or more classes to the selected elements
  • removeClass() – Removes one or more classes from the selected elements
  • toggleClass() – Toggles between adding/removing classes from the selected elements
  • css() – Sets or returns the style attribute

Example Stylesheet :

  • The following stylesheet will be used for all the examples on this page:

 

[code lang=”js”].important </span>{
<span class="highATT">font-weight:</span><span class="highVAL"> bold;</span>
<span class="highATT">font-size:</span><span class="highVAL"> xx-large;</span>
}

<span class="highELE">.blue </span>{
<span class="highATT">color:</span><span class="highVAL"> blue;</span>
}[/code]

jQuery addClass() Method :

  • The following example shows how to add class attributes to different elements. Of course you can select multiple elements, when adding classes:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some important text!</div><br>

<button>Add classes to elements</button>

</body>
</html>[/code]

  • You can also specify multiple classes within the addClass() method:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}
</style>
</head>
<body>

<div id="div1">This is some text.</div>
<div id="div2">This is some text.</div>
<br>

<button>Add classes to first div element</button>

</body>
</html>[/code]

jQuery removeClass() Method :

  • The following example shows how to remove a specific class attribute from different elements:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}
</style>
</head>
<body>

<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>

<p class="blue">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Remove class from elements</button>

</body>
</html>[/code]

jQuery toggleClass() Method :

  • The following example will show how to use the jQuery toggleClass() method. This method toggles between adding/removing classes from the selected elements:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
});
</script>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Toggle class</button>

</body>
</html>[/code]

jQuery css() Method :

  • The jQuery css() method will be explained in the next chapter.

Test Yourself with Exercises! :

Example : 1

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// add code here
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
background-color: yellow;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>[/code]

Example : 2

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// add code here
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
background-color: yellow;
}

.test {
color: red;
border: 5px dotted blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>[/code]

Example : 3

[code alng=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
// add code here
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
background-color: yellow;
}
</style>
</head>
<body>

<p>This is a paragraph – Click me to toggle class!</p>

</body>
</html>[/code]

 

jQuery – css() Method |Set Multiple CSS Properties |Examples :

jQuery css() Method :

  • The css() method sets or returns one or more style properties for the selected elements.

Return a CSS Property :

  • To return the value of a specified CSS property, use the following syntax:
[code lang=”js”]css("<i>propertyname</i>");[/code]
  • The following example will return the background-color value of the FIRST matched element:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<button>Return background-color of p</button>

</body>
</html>[/code]

Set a CSS Property :

  • To set a specified CSS property, use the following syntax:
[code lang=”js”]css("<i>propertyname</i>","<i>value</i>");[/code]
  • The following example will set the background-color value for ALL matched elements:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

</body>
</html>[/code]

Set Multiple CSS Properties :

  • To set multiple CSS properties, use the following syntax:
[code lang=”js”]css({"<i>propertyname</i>":"<i>value</i>","<i>propertyname</i>":"<i>value</i>",…});[/code]
  • The following example will set a background-color and a font-size for ALL matched elements:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set multiple styles for p</button>

</body>
</html>[/code]

Example : 1

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// add code here
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>[/code]

Example : 2

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// add code here
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>[/code]

Example : 3

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// add code here
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>[/code]

jQuery css() Method and Get and Set CSS Classes and HTML Remove Elements |Content | Examples

Example :1  [ jQuery css() – return CSS property   Return the value of a specified CSS property from the FIRST matched element. ]  :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<button>Return background-color of p</button>

</body>
</html>[/code]

Example : 2  [ jQuery css() – set CSS property
Set a specified CSS property for ALL matched elements. ]  :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

</body>
</html>[/code]

Example : 3 [ jQuery css() – set CSS properties
Set multiple CSS properties for ALL matched elements ]  :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set multiple styles for p</button>

</body>
</html>[/code]

jQuery Get and Set CSS Classes :

Example : 1  [ jQuery addClass()
Add class attributes to different elements. ] :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some important text!</div><br>

<button>Add classes to elements</button>

</body>
</html>[/code]

Example :2 [ jQuery addClass() – Multiple classes
Specify multiple classes within the addClass() method.  ]  :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}
</style>
</head>
<body>

<div id="div1">This is some text.</div>
<div id="div2">This is some text.</div>
<br>

<button>Add classes to first div element</button>

</body>
</html>[/code]

Example :3  [ jQuery removeClass()
Remove a specific class attribute from different elements. ]  :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}
</style>
</head>
<body>

<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>

<p class="blue">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Remove class from elements</button>

</body>
</html>[/code]

Exmple : 4 [ jQuery toggleClass()
Toggle between adding/removing classes from the selected elements.  ] :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
});
</script>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Toggle class</button>

</body>
</html>[/code]

jQuery HTML Remove Elements/Content :

Example : 1 [ jQuery remove()
Remove the selected element(s). ]

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>
<br>

<button>Remove div element</button>

</body>
</html>[/code]

Example : 2 [ jQuery empty()
Remove all child elements of the selected element(s). ] :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>
<br>

<button>Empty the div element</button>

</body>
</html>[/code]

Example : 3  [ jQuery remove() – with a parameter
Filter the elements to be removed ] :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".test");
});
});
</script>
<style>
.test {
color: red;
font-size: 20px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p class="test">This is another paragraph.</p>
<p class="test">This is another paragraph.</p>

<button>Remove all p elements with class="test"</button>

</body>
</html>[/code]

 

[wpsp]