입문

상상 외에'모르겠다'는 소리도 들렸다.
Javascript에서 css를 지정할 수 있습니다.모두가 알고 있는 내용이지만 이것을 더 쉽게 사용할 수 있는 명령이 있다.getComputedStyle() .
이것은 "특정 요소에서 계산하여 해당 요소에 현재 적용되는 CSS를 얻는 것"이다.
(현재 값을 참조하므로 스타일시트에 지정되지 않은 값이라도 얻을 수 있습니다.)
Javascript에서 style.css의 내용을 읽고 현재의 상태에 맞는 행동을 하도록 한다. 이런 기예가 가능하면 인터넷 디자인의 폭도 신속하게 확대해야 한다.

getComputedStyle () 의 예

getComputedStyle()는 CSS의 모든 값을 한 번에 얻을 수 있는 함수입니다.
즉, 원하는 CSS를 이해하기 위해서는 getComputedStyle()부터 "getPropertyValue()"로 범위를 좁힐 필요가 있다.
다음은 예입니다.
html

<style>
#prototype{
    color: #f9f9f9;
    width: 200px;
    background-color: #9898fd;
    padding: 1em;
}
</style>

<div id="prototype">div00</div>

<script type="text/javascript">
// 要素を取得
var element01 = document.getElementById('prototype');

// element01にかかるCSSを取得
var styles = window.getComputedStyle(element01, '');

var iro = styles.getPropertyValue('color'); // 文字色
console.log(iro);

var mleft = styles.getPropertyValue('margin-left'); // margin-left
console.log(mleft);

</script>

그럼 컨트롤러에서 보면 이게 이렇게 돼요.

지정margin-left이 없어도 얻을 수 있다는 것을 아십니까?이것이 바로 기본값이다.

작은 지식

색계의 단위는 rgb로 크기, 너비, 길이의 단위는 모두 px로 통일된다.
em, vw 또는% 를 사용하여 스타일을 지정하면 px로 되돌아옵니다.
또한 되돌아오는 값을 보면 알 수 있다. 되돌아오는 값은 수치뿐만 아니라 이 단위를 포함하는 문자열로도 되돌아온다.
그러니까 아까 margin-left를 수치로 사용하려면
javascript

var mleft = styles.getPropertyValue('margin-left'); // margin-left

var mleft_math = Number( mleft.replace(/px/g , '') ); // 数値化

이렇게 약간의 시간을 더할 필요가 있으니 주의해라.

위조 요소의 getComputedStyle ()

의심 요소에 걸린 스타일도 얻을 수 있다.
의심 요소의 경우 다음과 같다.
html

<style>
#prototype{
    color: #f9f9f9;
    width: 200px;
    background-color: #9898fd;
    padding: 1em;
}

#prototype::before{
    display: block;
    content: 'free';

}
</style>

<div id="prototype">div00</div>

<script type="text/javascript">
// 要素を取得
var element01 = document.getElementById('prototype');

// element01のbeforeにかかるCSSを取得
var styles = window.getComputedStyle(element01, '::before');

var beforeFS = styles.getPropertyValue('display');
console.log(beforeFS);
</script>

다른 브라우저에서의 비헤이비어

이런 편의성getComputedStyle()을 강조했지만 단점이 있다.
IE와 IE, 그리고 IE 등은 이 명령이 통용되지 않는 브라우저가 존재한다.
각자 연구하지는 않았지만 대체로 다음과 같은 대응을...마치.

이전 IE(11 이전)

javascript

var element01 = document.getElementById('prototype');

// element01のbeforeにかかるCSSを取得
var styles = element01.currentStyle;

var iro = styles.getPropertyValue('color'); // 文字色
console.log(iro);

javascript

 var stylelists = window.getComputedStyle(element, null) || element.currentStyle || document.defaultView.getComputedStyle(element, '');

경품: 가로폭

CSS는 getComputedStyle() 로 얻을 수 있다고 썼지만 요소의 세로 너비, 가로 너비에 대해서는 예외입니다.
즉 취득요소의 종폭, 횡폭의 명령은 getComputedStyle()과 분리되어 존재한다.

.clientWidth

채우기 너비

.offsetWidth

테두리, 채우기, 스크롤 막대를 포함한 가로 폭

.clientHeight

채워진 세로 너비 포함

.offsetHeight

테두리, 채우기, 스크롤 막대를 포함한 수직 너비
이 일대의 사이트https://ja.javascript.info/size-and-scroll는 매우 상세하다.

참고 문헌

https://amachang.hatenablog.com/entry/20070611/1181554170
https://ja.javascript.info/size-and-scroll
https://qiita.com/amamamaou/items/bb79bec002a6ff033810