Learning jQuery - Chapter Five: Changing Style in the Jay query
Chapter Five:
Changes in style DJ query:
Jquery style by an object can directly change the page. To change the style a few important functions are:
- $ (Selector). Css (name, value)
- $ (Selector). Css ({properties})
- $ (Selector). Css (name)
- $ (Selector). Height (value)
- $ (Selector). Width (value)
By the above three methods function css style elements can be changed much.
$ (Selector). Css (name, value)
The order value amounts for property name in all the html elements in accordance with the selector sets.
$ ("P"). Css ("background-color", "yellow");
Expression background color of all paragraphs in the page turns to yellow.
$ (Selector). Css ({properties}):
This command will set the css properties for multiple elements is optional. For example:
$ ("P"). Css ({"background-color": "yellow", "font-size": "200 %"});
These include the paragraph background color yellow and will double the size of their post. As you can see every Khvsvsyt with a comma "," is separated from the next property and all property between {and} have been.
$ (Selector). Css (name):
The command name of the element attribute value selector returns. For example:
$ (This). Css ("color");
These words, written element of the current color value returns.
$ (Selector). Height (value)
$ (Selector). Width (value)
Two functions, respectively, width and height to resize the width and height selector is used:
$ ("# Boxinfo"). Height ("200px");
The above amounts include an element with ID Artfaq boxinfo the page is 200 pixels.
$ (This). Width ("200px"). Height ("200px");
These include width and height of the current element is equal to 200 pixels.
Note: The two functions if the width and height parameters can be used without much width and height respectively element on Mygrdannd.
Add and remove class:
$ (Selector). AddClass (classname);
$ (Selector). RemoveClass (classname);
By two command can be a css class added to the selected element or elements of a class if the class are eliminated.
Example:
<html>
<head>
<script src="jquery.js" type="text/javascript"> </ script>
<script type="text/javascript">
$ (Document). Ready (function () {
$ ('Button'). Mouseover (function () {
$ ('P'). AddClass ('info');
})
$ ('Button'). Mouseout (function () {
$ ('P'). RemoveClass ('info');
})
})
</ Script>
<title> Example 1 </ title>
<style>
. Info {
background: # 000;
color: # FFF;
}
</ Style>
</ Head>
<body>
<button> move mouse to add or remove </ button>
<p> paragraph 1 </ p>
<p class="info"> paragraph 2 whit class info </ p>
</ Body> </ html>
After running the above code with the mouse button Winning Class info applies to the paragraphs with the mouse outside Berne class info button is removed.
Note: By order (selector). ToggleClass (content) $ can be added to the class element, and if the element of this class is used to remove it. (Switching between add and remove content for the element class selector).
hasClass (classname):
Element specifies whether or not there is a class classname.
if ($ ('# mydiv'). hasClass ('info'))
alert ('mydiv has class info');
position ():
$ (Selector). Position ()
This function selector between the top and left of the page specifies. Access to high distance. Top and left of the access gap. Left is used:
var pos = $ ('# mydiv'). position ();
var left = pos.left;
var top = pos.top;
Categories: Education Jquery , Web Design
