Introduction with JQUERY - Tinkering CSS Elements with CSS() Method

Guest Posts Paolo Nikko Nuñal

JQUERY also has a lot new feature that you can use, and that is returning CSS properties or that you can change them using the css() method. The css() method is used to set or return one or more style properties from the selected elements that you have choosen.

To return a value of a specified CSS property you can use the following syntax.

css("propertyname");

Here is an example on accessing the CSS elements.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
       $("#red").click(function(){
           alert("Color is  = " + $("#h1-red").css("background-color"));
       });


       $("#yellow").click(function(){
           alert("Color is  = " + $("#h1-yellow").css("background-color"));
       });


       $("#green").click(function(){
           alert("Color is  = " + $("#h1-green").css("background-color"));
       });
  });


</script>
</head>
<body>
<h3>Color Headers</h3>
<h3 style="background-color:red" id="h1-red">RED</h3>
<h3 style="background-color:yellow"  id="h1-yellow">YELLOW</h3>
<h3 style="background-color:green"  id="h1-green">GREEN</h3>
<button id="red">Return Red</button>
<button id="yellow">Return Yellow</button>
<button id="green">Return Green</button>
</body>
</html>


Thats it, that's how you return a CSS property. By clicking on the buttons, you can actually see what the CSS colors have been returned.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here



The next one is how you can set CSS property using the following syntax:

css("propertyname","value");

By doing so you can actually change HTML elements with different colors that you like. This is useful if you want of a more dynamic look on your site when specific actions are made.

Here is an example on setting a CSS property.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
       $("#setcolor").click(function(){
            $("h3").css("background-color","YELLOW");
       });
    });
</script>
</head>
<body>
<h1>Color Headers</h1>
<h3 style="background-color:RED">RED</h3>
<h3 style="background-color:GREEN">GREEN</h3>
<h3 style="background-color:YELLOW"YELLOW</h3>
<br>
<button type="button" id="setcolor">Set Color Yellow</button>
</body>
</html>


When you hit the "SET COLOR" button, it will automatically changed all h3 elements with the color "YELLOW".




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here