• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
  • Core Java
  • Design Patterns
  • JSP
  • Servlets
  • Building Tools
  • jQuery
  • Spring
  • Hibernate
  • Mongo DB
  • More
    • HTML
    • SCJP
    • AJAX
    • UML
    • Struts
    • J2EE
    • Testing
    • Angular JS

J2EE Reference

  • Home
  • About Us
    • Java Learning Centers
  • Contact Us

Adding css using jQuery

December 5, 2012 By j2eereference Leave a Comment

It is very easy to add css using jQuery. Lets understand this by different examples below.

Example 1:

Adding css for <li> tag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
&lt;title&gt;jQuery Basics&lt;/title&gt;
&lt;script type="text/javascript" src="script/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){
$("li").css("border","2px solid red");
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul id="item1"&gt;
    &lt;li&gt;List Item one&lt;/li&gt;
    &lt;li&gt;List Item two&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt; Paragraph One &lt;/p&gt;
  &lt;p&gt; Paragraph two&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Output

Here  you can notice that the css is applied for all the <li>.

Example 2:

Adding multiple style properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
&lt;title&gt;jQuery Basics&lt;/title&gt;
&lt;script type="text/javascript" src="script/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){
$("li").css({border: "2px solid red" , margin: "10px"});
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul id="item1"&gt;
    &lt;li&gt;List Item one&lt;/li&gt;
    &lt;li&gt;List Item two&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt; Paragraph One &lt;/p&gt;
  &lt;p&gt; Paragraph two&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Output

Here  you can notice that the margin and border properties are applied for all the <li>.

Example 3 :

Adding css for a particular ID.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
&lt;title&gt;jQuery Basics&lt;/title&gt;
&lt;script type="text/javascript" src="script/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){
$("#item1").css("border","2px solid red");
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul id="item1"&gt;
    &lt;li&gt;List Item one&lt;/li&gt;
    &lt;li&gt;List Item two&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt; Paragraph One &lt;/p&gt;
  &lt;p&gt; Paragraph two&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Output

Here  you can notice that css is applied for all the tags coming under the id ‘item 1’.

Filed Under: jQuery

Reader Interactions

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

FOLLOW US ONLINE

  • View J2eereference-166104970118637’s profile on Facebook
  • View j2eereference’s profile on Twitter
  • View j2eereference’s profile on LinkedIn

Subscribe by email

Recent posts

  • Java Buzzwords
  • Anonymous Inner Class in Java
  • Network Programming – java.net Package
  • Java Regular Expressions
  • Method Local Inner Class in Java
  • URL Processing in Java
  • Iterator Design Pattern Implementation using Java
  • Strategy Design Pattern Implementation using Java
  • Decorator Design Pattern
  • Adapter Design Pattern Implementation using Java
  • JSF Composite Components
  • JSF UI Components
  • What is JavaServer Faces (JSF)?
  • GOF Design Patterns
  • History and Need for Design Patterns

Footer

Core Java
Design Patterns
JSP
Servlets
HTML
Building Tools
AJAX
SCJP
jQuery
Testing
Spring
UML
Struts
Java Centers
Java Training
Home
About Us
Contact Us
Copyright © j2eereference.com. All right reserved.