JavaScript에서 스타일 속성 가져오기 JavaScript에서 CSS 스타일을 처리할 때 this.style[property]가 다음을 반환할 수 있는 상황이 있습니다. 빈 문자열. 이해 this.style[property] this.style[property]는 현재 요소의 인라인 스타일에 액세스합니다. 인라인 스타일은 태그 또는 HTML 요소 자체에 있습니다.</p> <p><strong>예제 시나리오</strong></p> <p>다음 코드를 고려하세요.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function css(prop, value) { if (value == null) { return this.style[prop]; } if (prop) { this.style[prop] = value; } return true; }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 함수를 사용하면 가져오거나 설정할 수 있습니다. element.css(property, value)를 사용하는 요소의 CSS 속성.</p> <p>그러나 다음 예에서 height와 같이 인라인으로 설정되지 않은 속성을 검색하려고 합니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><div></pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const element = document.getElementById('test'); const height = element.css('height'); // Returns ""</pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 경우 height는 인라인으로 정의되지 않았기 때문에 빈 문자열을 반환합니다. style.</p> <p><strong>해결책</strong></p> <p>외부 스타일시트에 정의된 CSS 속성에 액세스하거나 클래스를 사용하면 getCompulatedStyle() 함수를 사용할 수 있습니다. 이 함수는 적용된 모든 스타일을 포함하는 요소의 계산된 스타일을 검색합니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const element = document.getElementById('test'); const height = getComputedStyle(element).height; // Returns "100px"</pre><div class="contentsignin">로그인 후 복사</div></div> <p>제공한 업데이트 코드에서 계산된 스타일을 검색하기 위해 getComputeStyle()을 사용하여 CSS 함수를 수정했습니다. 요소:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function css(prop, value) { // Code to get or set CSS properties if (value == null) { var b = (window.navigator.userAgent).toLowerCase(); var s; if (/msie|opera/.test(b)) { s = this.currentStyle; } else if (/gecko/.test(b)) { s = document.defaultView.getComputedStyle(this, null); } if (s[prop] != undefined) { return s[prop]; } return this.style[prop]; } // Code to continue with your logic }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 업데이트된 기능을 사용하면 이제 외부 스타일시트에 정의되거나 클래스를 사용하여 정의된 CSS 속성을 올바르게 검색할 수 있습니다. 인라인 스타일로 설정되지 않은 경우</p>
![Why Does `this.style[property]` Sometimes Return an Empty String When Getting CSS Properties in JavaScript?](https://img.php.cn/upload/article/000/000/000/173348059619151.jpg)
