Detailed explanation of jQuery operation attributes and styles

Detailed explanation of jQuery operation attributes and styles_jquery

WBOY

Release： 2016-05-16 15:05:41

Original

1800 people have browsed it

• Distinguish between DOM attributes and element attributes

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

Copy after login

Usually developers are accustomed to calling id, src, alt, etc. the "attributes" of this element. We call this "element attribute". However, when parsing into a DOM object, the actual browser will eventually parse the tag element into a "DOM object" and store the element's "element attributes" as "DOM attributes". There is a difference between the two.

Even some "element attributes" and "DOM attributes" have different names, such as the element attribute class above, which corresponds to className after being converted into a DOM attribute.

Keep in mind, in javascript we can directly get or set "DOM properties":

<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>

Copy after login

So if you want to set the CSS style class of an element, you need to use the DOM attribute "className" instead of the element attribute "class".
-------------------------------------------------- ----------------------------------
•Operation "Dom attribute"

jQuery provides the each() function for traversing the jQuery packaging set, where the this pointer is a DOM object, so we can apply this with native javascript to operate 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);
 });

Copy after login

•Operation "Element Attribute"

We can use getAttribute and setAttribute in javascript to operate the "element attributes" of the element. jQuery provides you with the attr() wrapping set function, which can simultaneously operate the attributes of all elements in the wrapping set:

Although we can use removeAttr(name) to delete element attributes, the corresponding DOM attributes will not be deleted, and will only affect the value of the DOM attribute. For example, removing the readonly element attribute of an input element will cause the corresponding The DOM attribute becomes false (that is, the input becomes editable).

• Modify CSS classes and styles

The following table is the jQuery methods related to modifying CSS classes:

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

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

• Get common attributes

<!doctype html>
<html lang="zh">
<head>
 <meata charset="utf-8"/>
 <title>get object width</title>
 <script src="jquery-1.11.2.min.js"></script>
 <script>
  $(function() {
   alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined
   alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff)
   alert("width():" + $("#testDiv").width()); //正确的数值 1264
   alert("style.width:" + $("#testDiv")[0].style.width); //空值
  })
 </script>
</head>
<body>
 <div id="testDiv">test text</div>
</body>
</html>

Copy after login

We want to get the width of the test layer, and use the attr method to get the "element attribute" as undefined, because width is not added to the div. Although the value of the style attribute can be obtained using the css() method, 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 value without px.

In response to the above problem, jQuery provides methods for obtaining and setting commonly used attributes. For example, width() allows users 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 elements:

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 detailed explanation of jQuery operation attributes and styles is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.