window.getComputedStyle: 해당 태그의 CSS 전부를 읽어옴
getPropertyValue(''): CSS속성 별로 접근 방법
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
#txt {
width: 200px;
height: 60px;
color: red;
}
</style>
</head>
<body>
<input type="text" id="txt" value="테스트 텍스트">
<script>
// let para = document.querySelector('p');
// let compStyles = window.getComputedStyle(para);
// para.textContent = 'My computed font-size is ' +
// compStyles.getPropertyValue('font-size') +
// ',\nand my computed line-height is ' +
// compStyles.getPropertyValue('line-height') + '.';
//아이디 선택자로 태그 접근
var txt = document.querySelector("#txt");
console.log(txt);
console.log(txt.value);
//해당 태그의 CSS 전부 읽어옴
var style = window.getComputedStyle(txt);
//css 속성별로 접근 방법
console.log(style, style.getPropertyValue('color'));
</script>
</body>
</html>
'개발공부 일지 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트) 마우스 클릭 좌표(screenX, clientX, pageX, offsetX) (0) | 2021.08.25 |
|---|---|
| 자바스크립트) event.cancelBubble is not a function 오류발생 시 해결법. (0) | 2021.08.10 |
| 자바스크립트) this (0) | 2021.07.30 |
| 자바스크립트) 객체(object)-속성(property)-키(key)-값(value) (0) | 2021.07.29 |
| 자바스크립트) 소수판별 스크립트 (0) | 2021.07.15 |
댓글