JQuery – How To Find CSS Class In a Element

CSS is an acronym for Cascading Style Sheet which is used for describing the presentation semantics of document, the look and formatting of a document written in the markup language. The styles define how to display the elements in the document. The CSS method returns the CSS property value of an element. The CSS method allows changing the style property of specified element. The CSS method returns one or more style properties for the selected elements. It allows to style items within the same web page differently.

It defines layout of HTML documents such as fonts, size, colors, height, width, background color, and many other things.The CSS is designed to enable separation of document content from document presentation including elements such as layout, colors and fonts. One of the goals of CSS is to allow users greater control over presentation. Depending on the browser and web site, user may choose from various style sheets provided by designers or view the site using the browsers default styling.

This tutorial explains how to get the CSS of a particular element in the web page with simple example.

CSS Method Syntax

$(“.class”)

Here, class specifies the class of the elements to select. It is used to set particular style for several HTML elements. The CSS method performs following different tasks as follows :

  • css(name): It sets CSS property value.
  • css(name, value): It returns CSS property and value both.
  • css({properties}): It sets one or more style properties and values.

JQuery CSS Method Example

<!DOCTYPE html>
<head>
<title>CSS example</title>
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
       $(".myclass").css("background-color", "orange");
        $("h2").mouseover(function() {
         $("h2").css("background-color", "pink");
        });
      $("h2").mouseout(function() {
        $("h2").css("background-color", "gray");
        });
      });
</script>
</head>
<body>
   <h1>Welcome to JQuery</h1>
   <p class="myclass">It is JavaScript library. </p>
   <h2>It simplifies JavaScript programming. </h2>
</body>
</html>

As shown above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. There are two classes namely myclass and h2 which uses CSS properties to change styles of their particular elements. The mouseover event occurs when the mouse pointer is over the selected element. The mouseout event occurs when the mouse pointer leaves the selected element. In above example, when mouse leaves the selected element, it sets background-color to gray.

When you run the above example, you would get the following output:

JQuery - How To Find  CSS Class used In a Element?

We can also set one or more properties values using CSS properties as shown in the following example:

<!DOCTYPE html>
<head>
<title>CSS example</title>
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
        $(".myclass").css({"background-color" : "orange","font-size" :      "15px","font-face": "Arial"
        });
      });
</script>
</head>
<body>
   <h1>Welcome to JQuery</h1>
   <p class="myclass">It is JavaScript library. </p>
   <p class="myclass">It simplifies JavaScript programming. </p>
   <p class="myclass">It makes much easier to use JavaScript on your
      web site.</p>
   <p class="myclass">Before starting jQuery, you should know basics of HTML,CSS and JavaScript.</p>
</body>
</html>

As shown above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. We have used class called, myclass which uses multiple CSS properties to change styles of their particular elements.

When you run the above example, you would get the following output:

JQuery - How To Find  CSS Class used In a Element?

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*