설명
먼저 문제가 무엇인지 살펴보겠습니다.
<!doctype html><html lang="zh">
<head>
<meta charset="utf-8">
</head>
<body style="background-color:red;">
</body>
<script>
var a = document.querySelector('body'); var CamelCase = a.style.backgroundColor;
console.log('驼峰命名结果：'+CamelCase); var CSSProperty = a.style['background-color'];
console.log('CSS语法结果：'+CSSProperty); </script></html>로그인 후 복사
결과 사진:
아마도 아직 이상하다고 생각하지 않으실 수도 있습니다. a.style이 무엇인지 살펴보겠습니다. a.style 是什么，
上面的截图是一部分，没有全部截出来，因为实在太长了，主要是想说，在a.style 这个对象中并没有看见 background-color 这样的属性呀！ 为什么 a.style['background-color'] 居然也能获取到值，这是很奇怪的事。
解释
经过各种查资料，终于算是明白了，这主要是因为 CSSStyleDeclaration 做了 接口扩展，让 IDL属性 能够获取和设置 浏览器支持的 CSS属性。
CSSStyleDeclaration
CSSStyleDeclaration 表示一个CSS属性键值对的集合。它被用于一些API中：
HTMLElement.style - 用于操作单个元素的样式(<elem style="..."></elem>)；
(TODO: reword) 作为 declaration block 的接口，当规则为CSSStyleRule 时，由stylesheet中的 style 属性返回 。
CSSStyleDeclaration也是由window.getComputedStyle()返回的只读接口。
IDL
接口描述语言(Interface description language，缩写IDL)，是CORBA规范的一部分，是跨平台开发的基础。
IDL是用来描述软件组件接口的一种计算机语言。IDL通过一种中立的方式来描述接口，使得在不同平台上运行的对象和用不同语言编写的程序可以相互通信交流;比如，一个组件用C++写成，另一个组件用Java写成。
在 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.
例如
如果用户代理支持-webkit-transform 属性，因为驼峰命名的规则 会有webkitTransform IDL属性。也会有一个WebkitTransform IDL属性
说到这里大家应该明白点了。
我们最开始 a.style，a的style属性的值是一个对象。
这个对象所包含的属性与CSS规则一一对应，但是名字需要用驼峰命名的方式进行改变，比如background-color写成backgroundColor。改写的规则是将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写。如果CSS属性名是JavaScript保留字，则规则名之前需要加上字符串css，比如float写成cssFloat，而改写后的 backgroundColor 就是 IDL属性。
注意： “-” 在JS 中 是 减法的意思，变量名中是不能用“-”的
总结
说了这么多概念，我们简单理解就是， 像backgroundColor 与 background-color 这样的属性，他们的属性值是一样的，改变两个中任何一个属性的值，另一个属性的值也会随之改变，但是JS中变量不能用“-”，所以可以通过每个CSS属性 对应的 IDL属性，来获取和设置 CSS属性，所以JS 有background-color 这样的属性，只是不能这样显示出来，但是我们最开始的写成 a.style['background-color']
위 스크린샷은 일부일 뿐 전부는 아닙니다. 너무 길어서 가져왔습니다. 제가 말하고 싶은 가장 중요한 점은
a.style 개체에
ground-color와 같은 속성이 없다는 것입니다!
a.style['ground-color']가 실제로 값을 얻을 수 있는 이유는 무엇입니까? 이것은 매우 이상합니다. 🎜🎜Explanation🎜🎜다양한 검색 끝에 마침내 알아냈습니다. 이는 주로 CSSStyleDeclaration에 IDL 속성이 브라우저에서 지원하는 CSS 속성을 얻고 설정할 수 있는 인터페이스 확장이 있기 때문입니다. 🎜🎜🎜CSSSStyleDeclaration🎜 🎜
🎜CSSStyleDeclaration은 CSS 속성 키-값 쌍의 컬렉션을 나타냅니다. 일부 API에서 사용됩니다: 🎜
- 🎜HTMLElement.style - 개별 요소를 조작하기 위한 스타일(
<elem style="...">);🎜</elem>
- 🎜(TODO: reword) 선언 블록의 인터페이스로 규칙이 CSSStyleRule인 경우 스타일시트의 스타일 속성에 의해 반환됩니다. 🎜
- 🎜CSSSStyleDeclaration은 window.getCompulatedStyle()에서 반환되는 읽기 전용 인터페이스이기도 합니다. 🎜
🎜🎜IDL🎜 🎜🎜IDL(인터페이스 설명 언어)은 CORBA 사양의 일부이며 크로스 플랫폼 개발의 기초입니다. 🎜
IDL은 소프트웨어 구성 요소의 인터페이스를 설명하는 데 사용되는 컴퓨터 언어입니다. IDL은 서로 다른 플랫폼에서 실행되는 객체와 서로 다른 언어로 작성된 프로그램이 서로 통신할 수 있도록 인터페이스를 설명합니다. 예를 들어 한 구성 요소는 C++로 작성되고 다른 구성 요소는 Java로 작성됩니다. 🎜
🎜CSSOM에서 이렇게 작성했습니다🎜🎜🎜예를 들어🎜 🎜
사용자 에이전트가 -webkit-transform 🎜을 지원하는 경우
속성에는 webkitTransform IDL 속성이 있을 것입니다.
🎜 규칙 때문에 WebkitTransform IDL 속성이기도 합니다.
카멜 케이스 속성.🎜🎜
🎜🎜예를 들어🎜 🎜사용자 에이전트가 -webkit-transform 속성을 지원하는 경우 카멜 케이스 명명 규칙으로 인해 webkitTransform IDL 속성이 있습니다. WebkitTransform IDL 속성도 있습니다🎜🎜이 시점에서는 모두가 이해해야 합니다. 🎜a.style로 시작했는데 a의 스타일 속성 값이 객체입니다. 🎜이 개체에 포함된 속성은 CSS 규칙과 일대일로 일치하지만 이름은 카멜 케이스 이름 지정을 사용하여 변경해야 합니다. 예를 들어 background-color는 backgroundColor로 작성됩니다. 다시 작성하는 규칙은 CSS 속성 이름에서 하이픈을 제거한 다음 하이픈 뒤의 첫 글자를 대문자로 시작하는 것입니다. CSS 속성 이름이 JavaScript 예약어인 경우 css 문자열을 규칙 이름 앞에 추가해야 합니다. 예를 들어 float는 cssFloat로 작성되고, 다시 작성된 backgroundColor는 IDL 속성입니다. 🎜🎜🎜참고: 🎜 "-"는 JS에서 뺄셈을 의미하며 "-"는 변수 이름에 사용할 수 없습니다. 🎜🎜 요약 🎜🎜 많은 개념을 언급했지만 우리의 간단한 이해는 backgroundColor 및 background-color 속성과 같이 해당 속성 값입니다. 두 속성 중 어느 하나의 값을 변경하면 다른 속성의 값도 그에 따라 변경됩니다. 단, JS에서는 변수에 "-"를 사용할 수 없으므로 각 CSS에 대응할 수 있습니다. CSS 속성을 가져오고 설정하기 위한 IDL 속성이므로 JS에는 background-color와 같은 속성이 있는데 이렇게 표시할 수는 없지만 원래는 a.style['Background-color'] 이므로 "-"의 영향을 받지 않으므로 속성 값도 얻을 수 있습니다. 🎜위 내용은 배경색과 배경색의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
