JS (4) DOM 모델 의 속성 스타일
2017 단어 JavaScript대상dom속성 과 스타일
1. 프로필
DOM 모델: 문서 개체 모델, Document Object 모델.
DOM 은 언제 만 듭 니까? 웹 페이지 가 불 러 올 때 브 라 우 저 는 페이지 의 문서 대상 모델 을 만 듭 니 다.
2. 역할
DOM 모델 을 통 해 사용 자 는 HTML 요소 의 속성 과 스타일 을 수정 하고 HTML 요 소 를 증감 하 며 HTML 요소 의 이벤트 에 응답 할 수 있 습 니 다.
2. JS DOM 기능 을 자주 사용 합 니 다.
1. 출력 흐름: document. write (), 동적 으로 페이지 출력 내용 을 만 듭 니 다.
2. 태그 내용 변경: document. getElement ById ("id"). innerHTML = ";
3. 속성 변경: document. getElementById ("id"). src | href | title |.. | = ";
4. CSS 스타일 변경: document. getElementById ("id"). style. width | height | color | backgoundColor = ";
5. 흔 한 사건
1) 클릭 이벤트: onclick ()
2) 페이지 로 딩 이벤트: onload () 와 onunload ()
3) 내용 변경 이벤트: change ()
4) 포커 스 이벤트: onfocus ()
5) 마우스 이벤트: onmouseover (), onmouseout (), onmousedown (), onmouseop ()
6) 기타 이벤트:...
사실 이런 사건 은 매우 많 습 니 다. w3c 가 제공 하 는 js dom 사건 표를 참고 할 수 있 습 니 다. 위 에 자주 사용 하 는 사건 일 뿐 입 니 다.
3. 속성 과 스타일 예제 수정
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="div1"> div1</div>
<img src="./header.jpg"/>
<img src="./header.jpg"/>
</body>
<script>
//
var ele_img = document.getElementsByTagName("img");//
var x =0;
for(;x < ele_img.length;x++){ //xx.length,
ele_img[x].src="./header1.jpg";
}
// CSS
var ele_div1 = document.getElementById("div1");//id ，
ele_div1.innerHTML=" div1 ";
//css ：
ele_div1.style.color="#ffffff";
ele_div1.style.width="300px";
ele_div1.style.height="300px";
ele_div1.style.backgroundColor="#ff0000";
ele_div1.style.fontSize="24px";
ele_div1.align="center";
ele_div1.style.marginTop="30px";
ele_div1.style.paddingTop="100px";
ele_div1.style.visibility="visible";//visible|hidden
</script>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
