Use jquery to manipulate the element's style property

You can get the style attributes of an element directly using the CSS () method, as in the jquery code:

1	$("p").css("color");  //获取p元素的样式颜色

Whether the Color property is an external CSS import or is directly stitched into an HTML element (inline), the CSS () method can get the values of other properties in the properties style.

You can also directly use the CSS () method to set a single style for an element, for example:

1	$("p").css("color","red");  //设置p元素的样式颜色为红色

Like the attr () method, the CSS () method can also set multiple style properties at the same time, with the following code:

1	//同时设置字体大小和背景色

2	$("p").css({"fontSize":"30px","backgroundColor":"#ccc"})；

If the value is a number, it will be automatically converted to a pixel value. In the CSS () method, if the attribute has a "-" symbol, such as the font-size and Background-color attributes, if the value of these properties is set without the quotation marks, then use the camel style, such as the above code, if the quotation marks, can be written as " Font-size ", can also be written as" FontSize ". In short, we suggest that you add quotation marks and develop good habits.

For the transparency setting, you can use the Opacity property directly, and jquery has handled the compatibility issue, as shown in the following code, which sets the transparency of the P element to semitransparent:

1	$("p").css("opacity","0.5");

If you need to get the height property of an element, you can do so with the following jquery code:

1	$(element).css("height");

In jquery, there is another way to get the height of an element, which is high (). Its function is to obtain the current calculated height value (px) of the matching element:

1	$("p").height();    //获取p元素的高度值

The height () method can also be used to set the altitude of an element, and the default unit is PX if the value passed is a number. If you want to use a different unit (for example, EM), you must pass a string with the jquery code as follows:

1	$("p").height("100px"); //设置p元素的高度值为l00px

2	$("p").height("2em");   //设置p元素的高度值为2em

1. The height () method after the jquery L.2 version can be used to get the heights of window and document.
2. The difference is that the height value obtained by the CSS () method is related to the setting of the style, may get "auto" or a string such as "10px", while the height () method gets the actual height of the element in the page, regardless of the style setting and without units.

There is also a width () method corresponding to the height () method, which can get the width value (px) of the matching element.

1	$("p").width()； //获取p元素的宽度值

Similarly, the width () method can also be used to set the widths of the elements.

1	$("p").width("400px");   //设置p元素的宽度值为400px

Offset () method

Its function is to get the relative offset of the element in the current window, where the returned object contains two properties, that is, top and left, which are only valid for visible elements. For example, it gets the offset of the P element with its meter:

1	varoffset = $("p").offset();   //获取p元素的offset()

2	varleft = offset.left;   //获取左偏移

3	vartop =  offset.top;    //获取右偏移

Position () method

Its function is to get the relative offset of the element relative to the nearest position style property set to relative or absolute's grandfather node, as with offset (), and the object it returns also includes two properties, that is, top and left. The jquery code is as follows:

1	varposition = $("p").position();    //获取p元素的position()

2	varleft = position.left;    //获取左偏移

3	vartop = position.top;    //获取右偏移

ScrollTop () method and ScrollLeft () method

The effects of these two methods are to get the distance from the top of the scrollbar of the element and the distance from the left. For example, use the following code to get the scroll bar distance for the P element:

1	var$p =  $("p");

2	varscrollTop = $p.scrollTop();    //获取元素的滚动条距顶端的距离

3	varscrollLeft = $p.scrollLeft()；    //获取元素的滚动条距左侧的距离

Alternatively, you can specify a parameter for both methods, and the control element's scroll bar scrolls to the specified position. For example, use the following code to control the scroll bars within the element to scroll to the top 300 and 300 from the left:

1	$("textarea").scrollTop (300);    //元素的垂直滚动条滚动到指定的位置

2	$("textarea").scrollLeft (300); //元素的横向滚动条滚动到指定的位置

At this point, the DOM operations that are commonly used in jquery, including Dom Core,html-dom and Css-dom, have been described.

Use jquery to manipulate the element's style property