JavaScript는 웹 페이지를 제어합니다 - CSS 및 DOM_javascript 기술-JS 튜토리얼-php.cn

JavaScript는 웹 페이지를 제어합니다 - CSS 및 DOM_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:08:23

원래의

1332명이 탐색했습니다.

추천 도서: JavaScript 컨트롤 웹 페이지 - DOM

DOM은 World Wide Web 표준을 준수하는 HTML 조작 방법으로 innerHTML 기능보다 더 많은 조작 기능을 구현할 수 있습니다

HTML 코드와 CSS 코드는 다음과 같습니다

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span.class1{
background-color:#DDDDDD;
}
span.class2{
background-color:#221717;
}
</style>
</head>
<body>
<span id="span1" class="class1">
Start Game
</span>
<span id="span2" class="class2">
Start Game
</span>
</body>
</html>

로그인 후 복사

className 노드 속성은 노드의 전체 스타일 클래스를 변경하여 극적인 스타일 변경을 달성합니다

DOM은 노드 속성의 className 속성을 통해 요소 스타일 클래스에 대한 액세스를 제공합니다.

alert(document.getElementById(“span1”).className);

로그인 후 복사

CSS 스타일 클래스의 이름을 변경하여 요소의 모양 변형을 완료합니다

document.getElementById(“span1”).className=”class2”;//将span1的样式换成span2的样式

로그인 후 복사

마찬가지로 onmouseover() 및 onmouseout() 이벤트를 사용하여 요소의 스타일을 제어할 수도 있습니다

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">

로그인 후 복사

이 효과는 일반적으로 CSS를 사용하여 제어되지만 여기서는 이러한 도구의 적용에만 중점을 두며 비유를 따를 수 있습니다.

CSS 스타일 클래스는 Javascript 클래스와 전혀 관련이 없으며 완전히 다릅니다.

노드의 단일 스타일 속성에 액세스하여 스타일 노드 속성이 약간의 스타일 변경을 달성합니다

노드의 스타일 속성은 단일 스타일 속성에 대한 액세스를 제공합니다

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'" style=" visibility:hidden">

로그인 후 복사

style="visibility:hidden"은 요소가 숨겨져 있음을 나타냅니다

요소 개체의 가시성 스타일 기능을 사용하여 웹 페이지 요소를 동적으로 표시하거나 숨길 수 있습니다(display:none/display:block도 요소를 숨기거나 표시할 수 있음)

DOM은 텍스트 단락을 포함하여 모든 HTML 요소를 마음대로 만들 수 있습니다

document.createElement()는 HTML 태그를 생성하는 데 사용되며 매개변수는 태그 이름입니다.

document.createElement("p")는 p 태그를 생성합니다

또 다른: document.createTextNode()는 텍스트 단락을 만드는 데 사용되며 매개변수는 텍스트 콘텐츠입니다.

var pElem=document.createElement(“p”);//P 태그 생성

pElem.appendChild(document.createTextNode("Hello WeAreZero!"));//P 태그에 하위 요소 텍스트 추가

document.getElementById("span1").appendChild(pElem);//span1 태그에 P 태그와 해당 하위 요소 추가

부록:

문서 개체의 createElement() 메서드를 사용하면 모든 HTML 요소를 만들 수 있습니다.

요소에 텍스트 콘텐츠를 추가해야 하는 경우 텍스트 콘텐츠 하위 요소를 생성하여 요소에 추가해야 합니다.

DOM 트리에서 노드를 신중하게 추가하고 제거하면 웹페이지를 마음대로 분해하고 재구성할 수 있습니다.

웹 페이지를 제어하는 JavaScript(CSS 및 DOM)를 소개합니다. 모든 분들께 도움이 되기를 바랍니다!