What is the difference between background-color and backgroundColor-CSS Tutorial-php.cn

What is the difference between background-color and backgroundColor

一个新手

Release： 2017-09-11 11:07:38

Original

2996 people have browsed it

Explanation

Let’s first look at what the problem is.

<!doctype html><html lang="zh">
 <head>
     <meta charset="utf-8">
 </head>

 <body style="background-color:red;">
 </body>

 <script>
    var a = document.querySelector(&#39;body&#39;);    var CamelCase = a.style.backgroundColor;
    console.log(&#39;驼峰命名结果：&#39;+CamelCase);    var CSSProperty = a.style[&#39;background-color&#39;];
    console.log(&#39;CSS语法结果：&#39;+CSSProperty); </script></html>

Copy after login

Result picture:
What is the difference between background-color and backgroundColor

Maybe you haven’t found it strange yet, let’s take a look againa.style Yes What,
What is the difference between background-color and backgroundColor
The above screenshot is part of it, not all of it, because it is too long. The main thing is to say that I did not see # in the a.style object. ##background-color Such an attribute! Why a.style['background-color'] can actually get the value? This is very strange.

Explanation

After various searches, I finally figured it out. This is mainly because CSSStyleDeclaration has made an interface extension, allowing IDL properties to obtain and set CSS properties supported by the browser.

CSSStyleDeclaration
What is the difference between background-color and backgroundColor CSSStyleDeclaration represents a collection of CSS property key-value pairs. It is used in some APIs:

HTMLElement.style - used to manipulate the style of a single element (
);
(TODO: reword) As the interface of declaration block, when the rule is CSSStyleRule, it is returned by the style attribute in the stylesheet.
CSSStyleDeclaration is also a read-only interface returned by window.getComputedStyle().

IDL

Interface description language (IDL) is part of the CORBA specification and is a cross-platform development Foundation.
IDL is a computer language used to describe the interface of software components. 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, one component is written in C++ and another component is written in Java.

Write this in CSSOM

For example if the user agent supports the -webkit-transform
property, there would be a webkitTransform IDL attribute. There would
also be a WebkitTransform IDL attribute because of the rules for
camel-cased attributes.

For example If the user agent supports the -webkit-transform attribute, there will be webkitTransform IDL attributes because of the camel case naming rules. There will also be a WebkitTransform IDL attribute

Everyone should understand it at this point.

We started with
a.style, the value of the style attribute of a is an object. The properties contained in this object correspond to CSS rules one-to-one, but the name needs to be changed using camel case naming. For example, background-color is written as backgroundColor. The rule for rewriting is to remove the hyphen from the CSS property name, and then capitalize the first letter after the hyphen. If the CSS attribute name is a JavaScript reserved word, the string css needs to be added before the rule name. For example, float is written as cssFloat, and the rewritten backgroundColor is the IDL attribute.

Note: "-" means subtraction in JS, "-" cannot be used in variable names

Summary

said With so many concepts, our simple understanding is that attributes such as backgroundColor and background-color have the same attribute value. If the value of any one of the two attributes is changed, the value of the other attribute will also change accordingly, but JS "-" cannot be used in variables, so you can get and set CSS properties through the IDL properties corresponding to each CSS property, so JS has properties such as background-color, but it cannot be displayed like this, but we originally wrote it as

a.style['background-color'], so it is not affected by "-", so the attribute value can also be obtained.

The above is the detailed content of What is the difference between background-color and backgroundColor. For more information, please follow other related articles on the PHP Chinese website!