• Distinguish between DOM attributes and element attributes
Typically, developers are accustomed to id,src,alt such as "attributes" of this element. We call it "element attributes." However, when parsing into a DOM object, the actual browser eventually resolves the label element to "Dom object" and stores the element attribute as a "Dom attribute", which is different.
Even some of the "element attributes" and "DOM properties" have different names, such as the element attribute class above, which corresponds to the className when converted to DOM attributes.
Keep in mind that in JavaScript we can get or set the DOM properties directly:
<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>
So if you want to set the CSS style class for the element, you want to use the DOM property "ClassName" instead of the element attribute "class".
--------------------------------------------------------------------------------
• Manipulating Dom properties
In jquery, the each () function is used to traverse the jquery wrapper set, where the this pointer is a DOM object, so we can apply this in conjunction with native JavaScript to manipulate the element's DOM properties:
$ ("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);
});
• Manipulating Element properties
We can use the getattribute and setattribute in JavaScript to manipulate element attributes of elements. In JQuery, you are provided with a attr () wrapper set function that can simultaneously manipulate the attributes of all elements in the wrapper set:
Although we can use REMOVEATTR (name) to delete element attributes, the corresponding DOM properties will not be deleted and affect only the value of the DOM property. For example, removing the readonly element attribute of an INPUT element causes the corresponding DOM property to be False ( That is, input becomes an editable state.
• Modify CSS classes and styles
The following table is the JQuery method associated with modifying a CSS class:
Note that addclass (class) and Removeclass (classes) parameters can be passed in multiple CSS classes at a time, separated by spaces. The parameters of the Removeclass method are optional and all CSS classes are removed if the argument is not passed in.
Also, when we want to modify an element's specific CSS style, that is, to modify the element property "style", JQuery provides the appropriate method:
• Get Common Properties
<!doctype html>
We want to get the width of the test layer and use the attr method to get the "element attribute" as undefined because no width is added to the Div. While using the CSS () method can get the value of the Style property, but the results returned in different browsers are different, IE6 returns auto, while FF returns the correct value, but with "px" behind it. So jQuery provides the width () method, which returns the correct numeric value without PX.
For the above problem, JQuery provides a way to get and set the commonly used properties, such as width (), where the user gets the breadth of the element, and width (val) is used to set the width of the element.
The following methods can be used to get common property values for an element:
1. Width and height correlation height and width
Outerwidth can accept a bool value parameter to indicate whether the margin value is computed.
2. Position-related positioning
Above this jquery operation attribute and the style detailed explanation is small arranges to share to everybody's content, hoped can give everybody a reference, also hoped that everybody supports the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
