——이 글은 시작됩니다——
1. 요소의 스타일 조작
1. 요소의 인라인 스타일 설정
구문: element.style.style 이름 = 스타일 값, 인라인 스타일을 요소에 설정
참고: 밑줄이 있는 스타일 이름은 카멜 표기법이나 배열 연관 구문으로 작성해야 합니다.
2. 요소의 인라인 스타일을 가져옵니다.
구문: element.style.style 이름
Get: 요소의 지정된 스타일 값
참고: 인라인 스타일의 값만 가져올 수 있으며 비인라인 스타일의 값은 가져올 수 없습니다. 밑줄이 있는 스타일 이름은 카멜 케이스 또는 배열 연관 구문으로 작성해야 합니다.
3. 요소의 인라인이 아닌 스타일을 가져옵니다.
표준 브라우저:
구문: window.getCompulatedStyle(가져오는 요소).스타일 이름
반환값: 요소의 지정된 스타일에 해당하는 값
참고: 밑줄이 포함된 스타일 이름은 카멜 케이스 또는 배열 연관 구문으로 작성해야 합니다. 스타일 값은 인라인 및 비인라인 모두 얻을 수 있지만 표준 브라우저에서만 사용할 수 있습니다.
IE 하위 버전:
구문: element.currentStyle.style 이름
Get: 요소의 지정된 스타일에 해당하는 값
참고: 밑줄이 있는 스타일 이름은 카멜 케이스 또는 배열 연관 구문으로 작성해야 합니다. 스타일 값은 인라인 및 비인라인 모두 얻을 수 있지만 낮은 버전의 IE 브라우저에서만 사용할 수 있습니다.
4.코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 100px;
}
</style>
</head>
<body>
<div style="width:100px">你好世界</div>
<script>
//1.设置元素的行内样式
var box = document.getElementsByTagName('div')[0]
console.log (box);
box.style.color = 'skyblue'
//2.获取元素的行内样式
console.log (box.style.width);
console.log (box.style.height); //用的非行内式
//3.获取元素非行内样式
//标准浏览器
var res = window.getComputedStyle(box).height
console.log (res);
</script>
</body>
</html>결과:
2. 요소 클래스 이름 조작
1.클래스이름
사실 요소의 기본 속성을 조작하는 것인데, js에서는 class가 키워드이므로 우리가 조작하는 기본 속성의 이름을 className으로 변경했습니다.
읽다:
구문: 요소.클래스이름
Get: 요소의 전체 클래스 이름(문자열 형식)
쓰다:
구문: element.className = '값'
기능: 요소 클래스 이름 설정, 적용 범위 설정 완료
추가:
구문: element.className += '값'
참고: 값 위치에는 공백을 써야 합니다.
암호:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box box2"></div>
<script>
var div = document.querySelector('div')
console.log (div.className);
div.className = 'zs'
console.log (div);
div.className += ' ls'
console.log (div);
</script>
</body>
</html>결과:
2.클래스리스트
각 요소에는 요소의 모든 클래스 이름을 기록하는 배열과 유사한 컬렉션인 classList라는 속성이 있습니다.
수업 이름을 추가합니다.
구문: element.classList.add('추가할 클래스 이름')
기능: 요소에 클래스 이름을 추가하지만 중복 항목은 추가되지 않습니다.
수업 이름 삭제:
구문: element.classList.remove('삭제할 클래스 이름')
기능: 요소의 클래스 이름을 삭제합니다.
수업 이름을 전환합니다.
구문: element.classList.toggle('전환할 클래스 이름')
기능: 이 요소는 클래스 이름을 전환합니다.
전환: 있으면 삭제, 없으면 추가
암호:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>切换类名</button>
<div class="box box2"></div>
<script>
var div = document.querySelector('div')
var btn = document.querySelector('button')
console.log (div.classList);
div.classList.add('ww')
console.log (div);
div.classList.remove('ls')
console.log (div);
btn.onclick = function(){
div.classList.toggle('ww')
console.log (div);
}
</script>
</body>
</html>결과:
——이 글을 마치며 ——