HTMLElement.style을 호출하려고 하면 배경 단축 속성의 값이 잘못 확장됩니다.

Question

요소 스타일에는 배경에 대한 약식 선언을 포함하여 몇 가지 인라인 CSS 선언이 있습니다

<style>
  :뿌리{
    --bg-white: rgba(255, 255, 255, 0);
  }
</스타일>

<div style="배경: var(--bg-white) ... "></div>

그러나 HTMLElement.style을 반복할 때 단축 속성이 잘못 확장된 것처럼 보입니다

for (Array.from(target.style)의 const 선언) {
   const 값 = target.style.getPropertyValue(선언)

   console.log(`${선언}: ${value}`)
 }

이것은 MDN의 HTMLElement.style 문서에 따라 background-color: var(--bg-white)를 인쇄해야 하지만 background-color:를 얻습니다. ' ' <인용문>

확장된 약어 속성입니다. style="border-top: 1px Solid black"으로 설정하면 일반 속성(border-top-color, border-top-style 및 border-top-width)이 설정됩니다.

이러한 상황을 겪어본 사람이 있나요?

Answer 1

Array.from(target.style)获取target.style의 기본 반복자를 사용하는 데 문제가 있습니다. 배경 속성은 포함되지 않습니다. 사양에 따르면 단축 속성이 다양한 부분으로 확장되었습니다.

모든 것은 코드에 설명되어 있습니다.

댓글로 팁을 주신 @t.niese님께 감사드립니다.

으아악

Answer 2

HTMLElement.style，它将返回通过style 속성을 사용하여 (계산하는 대신) 직접 적용하는 경우.

이 경우 브라우저는 background: var(--bg-white); 中的 var(...) 将解析什么并它将包含哪些 background-... 属性（变量的内容将放置在 var(...) 문이 어디에 있는지 알 수 없으며 결과 값이 구문 분석됩니다.

예를 들어 --bg-white: content-box Radial-gradient(crimson, skyblue); 那么你的 --bg-white가 있는 경우 실제로 여러 속성에 영향을 미칩니다.