CSS Properties In JQuery
Apply Multiple CSS Properties
You can apply multiple CSS properties using a single JQuery method CSS({key 1:val1,key2:val2….) You can apply as many properties as you like in a single call. Here is the syntax for the method : selector.css{(key1:val1, key2:val2….KeyN:valN)} Here you can pass key as property and val as its value as described above. Example Following is an example which adds font color as well as background color to the second list item. <html> <head> <title>the title</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”></script> <script type=”text/javascript” language=”javascript”> $(document).ready(function()) { $(“li”).eq(2).css({“color”,”red”,”background-color” : “green”}); }); </script> </head> <body> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </body> </html>
Setting Element Width & Height
The width(val) and height(val) method can be used to set the width and height respectively of any element. Example Following is a simple example which sets the width of first division element where as rest of the element have width set by style sheet: <html> <head> <title>the title</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”></script> <script type=”text/javascript” language=”javascript”> $(document).ready(function()) { $(“div:first”).width(100); $(“div:first”).css(“background-color”,”blue”) }); </script> <style> div{ width:70px; height:50 px;float:left;margin:5px; background:red; cursor:pointer;} </style> </head> <body> <div></div> <div></div> <div>d</div> <div>d</div> <div>d</div> <div>d</div> </body> </html> Jquery CSS Methods Following table lists down all the methods which you can use to play with CSS properties
| Method | Description |
| css(name) | Returns a style property on the first matched element. |
| css(name,value) | Set a single style property to a value on all matched elements. |
| css(properties) | Set a key/value object as style properties to all matched elements |
| height(val) | Set the CSS height of every matched element |
| height() | Get the current computed, pixel,height of the first matched element |
| innerHeight() | Gets the inner height(excludes the border and includes the padding ) for the first matched element. |
| innerwidth() | Gets the inner width(excludes the border and includes the padding) for the first matched element |
| offset() | Get the current offset of the first matched element, in pixels, relative to the document |
| offsetParent() | Returns a jQuery collection with the positioned parent of the first matched element |
| outerWidth([margin]) | Get the outer width(includes the border and padding by default) for the first matched element |
| position() | Gets the top and left position of an element relative to its offset parent. |
| scrollLeft(val) | When a value is passed in, the scroll left offset is set to that value on all matched elements. |
| scrollLeft() | Gets the scroll left offset of the first matched element. |
| scrollTop(val) | When a value is passed in, the scroll top offset is set to that value on all matched elements. |
| scrollTop() | Gets the scroll top offset of the first matched element. |
| width(val) | Set the CSS width of every matched element. |
| width() | Get the current computed, pixel, width of the first matched element. |
You liked the article?
Like : 0
Vote for difficulty
Current difficulty (Avg): Medium
About Author
Name
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
Stay Updated
Get stories of change makers and innovators from the startup ecosystem in your inbox