Description
Let's first see what the problem is.
<!doctype html>result diagram:
Maybe you don't think it's weird, we'll see
a.stylewhat it is,
The above is a part, not all cut out, because it is too long, mainly to say, ina.stylethis object did not seebackground-colorsuch a property ah!a.style['background-color']It's strange that you can actually get the value.Explain
After a variety of search data, finally understood, this is mainly because cssstyledeclaration did the interface extension, let IDL properties can get and set the browser support CSS properties.
cssstyledeclaration
Cssstyledeclaration represents a collection of CSS property key-value pairs. It is used in some APIs:
Htmlelement.style-the style used to manipulate individual elements ( <elem style="..."> );
(Todo:reword) as an interface to the declaration block, returned by the style property in stylesheet when the rule is cssstylerule.
Cssstyledeclaration is also a read-only interface returned by window.getComputedStyle ().
IDL
The interface Description Language (Interface Description Language, abbreviated IDL) is part of the CORBA specification and is the basis for cross-platform development.
IDL is a computer language used to describe the interface of a software component. IDL describes interfaces in a neutral way, so that objects running on different platforms and programs written in different languages can communicate with each other, for example, a component is written in C + + and another component is written in Java.
In the CSSOM, this writes to
For Example
If the user agent supports The-webkit-transform
property, there would is a webkittransform IDL attribute. There would
Also is a webkittransform IDL attribute because of the rules for
camel-cased attributes.
For example
If the user agent supports the-webkit-transform property, the rules for hump naming will have the Webkittransform IDL attribute. There will also be a webkittransform IDL attribute
Speaking of which, we should understand the point.
At first a.style , the value of the style property of a is an object.
This object contains properties that correspond to the CSS rule one by one, but the name needs to be changed by the way the hump is named, such as Background-color written backgroundcolor. The overriding rule is to remove the bars from the CSS property name and then capitalize the first letter after the bar. If the CSS property name is a JavaScript reserved word, then the rule name needs to be preceded by a string CSS, such as float written cssfloat, and the rewritten backgroundcolor is the IDL attribute.
Note: "-" in JS is the meaning of subtraction, the variable name is not used "-"
Summarize
To say so many concepts, we simply understand that, like BackgroundColor and Background-color properties, their property values are the same, change the value of any one of the two, the value of the other property will change, but JS in the variable can not be used "- , so you can get and set CSS properties by using the IDL property of each CSS property, so JS has a property like Background-color, but it just can't be shown, but the first thing we write is a.style[' Background-color '] , so it is not affected by the "-", so you can also get the property value.
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
