JavaScript는 CSS 스타일을 얻습니다.

구문:
nodeObject.style.cssProperty
그 중 nodeObject는 노드 객체이고 cssProperty는 CSS 속성입니다.

예:

document.getElementById("demo").style.height;
document.getElementById("demo").style.border;

참고: "-"로 구분된 CSS 속성의 경우 "-"를 제거하고 "-" 뒤의 첫 번째 문자를 대문자로 표시합니다. 예:
background-color는 backgroundColor로 작성해야 합니다.
line-height는 lineHeight로 작성해야 합니다.

예:

document.getElementById("demo").style. backgroundColor;
document.getElementById("demo").style.lineHeight;

예를 들어, 스타일을 가져옵니다. id="demo"인 노드:

<div id="demo" style="height:50px; width:250px; margin-top:10px; text-align:center; line-height:50px; background-color:#ccc;">
    点击这里获取CSS样式
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "高度："+this.style.height+"\n"+
            "宽度："+this.style.width+"\n"+
            "上边距："+this.style.marginTop+"\n"+
            "对齐："+this.style.textAlign+"\n"+
            "行高："+this.style.lineHeight+"\n"+
            "背景颜色："+this.style.backgroundColor
        );
    }
</script>

위 코드를 약간 수정하여 HTML에서 CSS 스타일을 분리합니다.

<style>
#demo{
    height:50px;
    width:250px;
    margin-top:10px;
    text-align:center;
    line-height:50px;
    background-color:#ccc;
    }
</style>
<div id="demo">
    点击这里获取CSS样式
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "高度："+this.style.height+"\n"+
            "宽度："+this.style.width+"\n"+
            "上边距："+this.style.marginTop+"\n"+
            "对齐："+this.style.textAlign+"\n"+
            "行高："+this.style.lineHeight+"\n"+
            "背景颜色："+this.style.backgroundColor
        );
    }
</script>

분리한 후에는 CSS 스타일을 얻을 수 없습니다. HTML 코드의 CSS 스타일. 이는
nodeObject.style.cssProperty
가 DOM 노드의 style 속성에 의해 정의된 스타일을 얻기 때문입니다. style 속성이 존재하지 않거나 style 속성이 해당 스타일을 정의하지 않습니다. 스타일로는 얻을 수 없습니다.

즉, JavaScript는 해당 스타일을 가져오기 위해 <style> 태그나 CSS 파일로 이동하지 않고 스타일 속성에 정의된 스타일만 가져올 수 있습니다.