JQuery operation attribute and style details, jquery style details

JQuery operation attribute and style details, jquery style details

• Differentiate between DOM attributes and element attributes

Generally, developers are used to calling id, src, alt, and other "attributes" of this element ". We call it "element attribute ". However, when parsed to a DOM object, the actual browser will finally parse the tag element into a "DOM object" and store the "element attribute" of the element as "DOM attribute ", the two are different.

Even some "element attributes" and "DOM attributes" have different names. For example, the above element attribute class corresponds to the className after being converted to the DOM attribute.

Remember, in javascript, we can directly get or set the "DOM attribute ":

<script type="text/javascript">  $(function() {    var img1 = document.getElementById("hibiscus");    alert(img1.alt);    img1.alt = "Change the alt element attribute";    alert(img1.alt);    img1.className = "classB";  })</script>

Therefore, to set the CSS style class of an element, you must use the DOM attribute "className" instead of the element attribute "class ".
--------------------------------------------------------------------------------
• Operate "Dom attributes"

The each () function provided by jQuery is used to traverse the jQuery package set. The this pointer is a DOM object, so we can apply this and use native javascript to manipulate the DOM attributes of the element:

$("img").each(function(index) {   alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);   this.alt = "changed";   alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt); });

• Operate "element attributes"

We can use getAttribute and setAttribute in javascript to operate the "element attribute" of an element ". In jQuery, you are provided with the attr () set function, which can simultaneously manipulate the attributes of all elements in the Set:

Although we can use removeAttr (name) to delete element attributes, the corresponding DOM attributes will not be deleted and will only affect the values of DOM attributes. for example, if you remove the readonly attribute of an input element, the corresponding DOM attribute is changed to false (that is, the input is changed to editable State ).

• Modify CSS classes and styles

The following table shows the jQuery Method for modifying the CSS class:

Note that parameters of addClass (class) and removeClass (classes) can be input into multiple css classes at a time and separated by spaces. The parameters of the removeClass method are optional. If no parameters are input, all CSS classes are removed.

Similarly, when we want to modify a specific CSS style of an element, that is, to modify the element attribute "style", jQuery also provides the corresponding method:

• Get common attributes

<! Doctype html> 
We want to get the width of the test layer, and use the attr method to get the "element feature" as undefined, because no width is added for the div. The css () method can be used to obtain the value of the style attribute, but different results are returned in different browsers. in IE6, auto is returned, in FF, although the correct value is returned, it is followed by "px ". Therefore, jQuery provides the width () method, which returns a correct value without px.
To solve the preceding problem, jQuery provides methods for obtaining and setting common attributes. For example, width () is used to obtain the width of an element, while width (val) is used to set the width of an element.
The following methods can be used to obtain common attribute values of an element:
1. Width and Height related Height and Width


OuterWidth can accept a bool value parameter to indicate whether to calculate the margin value.
2. Positioning


The above jQuery operation attribute and style details are all the content shared by the editor. I hope you can give us a reference and support the help house.