Is aaa. style equivalent to aaa. getAttribute ('style') in js? Is there any difference? -

Source: Internet
Author: User
Is aaa. style equivalent to aaa. getAttribute (style) in js? Is there any difference? I tested the same results in various browsers (ie 6 to chrome). I didn't find any difference? I know the difference. The second sentence below cannot be found in the advanced browser, but I want to ask why the second sentence in IE67 can also be successfully executed ??? Is there any difference between aaa. style and aaa. getAttribute ('style') in aaa. st js under ie67 equivalent?

I tested the same results in various browsers (ie 6 to chrome), but I didn't find any difference.

Is it exactly the same?
======================================
I know the difference. The second sentence below cannot be found in the advanced browser.
However, why can the second sentence be successfully executed in IE6/7 ???
Is aaa. style and aaa. getAttribute ('style') equivalent in ie6/7 ???
Alert (aaa. style. height );
Alert (aaa. getAttribute ('style'). height); reply content: pass
This is an old problem.
I should have forgotten it now.

Lazy re-writing
Paste an old image.

Since the writing time is very early, the details may change. Since the writing time is very early, the details may change.
However, this is generally the case.
You can understand the differences.

First, distinguish between property and attribute. Both translated Chinese texts can be used as attributes, but they are actually different.

The attribute in the html Tag is called attribute.
Example: alaki

This dom element has three attributes: href, data-tips, data-original_title

Property is the attributes that are created when it is created, such as attributes, autofocus, className, and clientHeight.
Specifically, assume that
Alaki
For this dom element, the class is not only attribute, but also property. However, in dom. element, it is called className, and the two are bound.

Simply put, some special attributes will be converted to property, two ships on foot, the same style is also a guy on two boats.

For inline styles, getAttribute ('style') can be used, but only partial attributes of inline styles cannot be obtained through external style sheets or embedded styles, the return value is a string.

If it is not inline, getAttribute ('style') returns null or an empty string. The returned result depends on the browser's implementation of Element. getAttribute () .

In the preceding two cases, dom. style will obtain the complete style attribute, and the returned value is the object CSSStyleDeclaration.

Last question about ie6 and ie7,

There is a sentence: In IE5-7, accessing the style attribute gives an object There is a sentence: In IE5-7, accessing the style attribute gives an object
DOM Core

In the ie5-7, the implementation of getAttribute () is the same effect as dom. style @ alaki has been very good, I will add.

Elem. style and elem. the relationship between getAttribute ('style') is mentioned in this answer. For more information, see: Why does the browser of webkit kernel removeAttribute ('style') become invalid? -Gu Lingling's answer (some links seem to be invalid)

In general, if you change the content attribute of the style, it will retain the modified content. However, when reading the IDL attribute, it will be updated based on the CSS attribute corresponding to the new content attribute, when writing the IDL attribute, the content attribute will be re-serialized to be synchronized with the IDL attribute.

For example:
HTML:

How can it be the same? One is a CSSStyleDeclaration object and the other is a string. Are you kidding?
The style of aaa. style is dom property, and aaa. getAttribute ('style') gets html attribute;

Html attribute is defined by html, and dom property is defined by DOM;
1. Many attributes have the corresponding property
2. Some attributes have no corresponding property
3. Some properties do not have the corresponding attribute.

The general rule is that the html attribute is used to initialize the dom property value, which is generally not changed unless the script is changed, and the dom property changes with the user's interaction behavior, for example, input value.

The example of the subject cannot tell the difference, but the value changed to input can better tell the difference. Thank you for your invitation.

Not equivalent. It happens that it is equivalent only because it is an inherent property of the preset. Class (Name) is compatible at the beginning. Custom Attributes do not work. Title is more reliable. I doubt whether style can be used as an object.

In practice, all native attributes are. xxx, and all custom attributes are. getAttribute. The latter takes into account compatibility, including data -*.

Supplement:
The actual measurement. getAttribute ('style') is a string.
Ie7-not supported. setAttribue ('style', '') IE6/7 under 'elem. getAttribute ("style") 'and 'elem. style 'returns 'cssstyledeclaration' objects.
This is a BUG that has been fixed after IE8.
'Elem. getAttribute ("style") 'returns the css text on the element's style attribute (if a bit, no null is returned), while 'elem. style' returns 'cssstyledeclaration '. The differences between Secret Of The JavaScript Ninja are described in detail. Aaa. getAttribute ('style') obtains the aaa inline style string.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.