비디오: (ENG SUB)[Javascript 기초와 활용 #1] 스타크래프트 만들기?! (feat. JQuery, Codepen, Bootstrap 등) 2024
페이지에 특수 효과를 만들기위한 빌딩 블록 중 하나는 페이지에 동적 HTML 변경 기능을 추가하는 것입니다. 예를 들어 다음 예제와 같이 선택한 요소에 특수 효과를 만들 수 있습니다.
function ChangeStyles (event) {// 요소에 대한 참조를 얻습니다. var ThisElement = 문서. getElementById (event. currentTarget. id); // 이벤트 유형을 확인하십시오. if (event. type == "mouseover") {// 대상 요소의 CSS 클래스를 변경합니다. ThisElement. setAttribute ("class", "Selected");} else {ThisElement. setAttribute ("class", "Normal");}}
이 코드는 이벤트를 입력으로받습니다. 이 코드는 Event 객체가 제공하는 요소에 대한 참조를 가져옵니다. 그런 다음 이벤트를 확인합니다. type 속성을 사용하여 어떤 유형의 이벤트가 발생했는지 (마우스 오버 또는 마우스 아웃)를 결정합니다. 이벤트 유형에 따라 요소의 형식이 결정됩니다.
물론 onmouseover 및 onmouseout 이벤트에 대한 이벤트 처리기를 할당하기위한 자동화를 제공하는 것이 편리 할 것입니다. 다음 코드는이 작업을 수행합니다.
//태그를 사용하는 요소의 목록을 가져옵니다. var ElementList = 문서. getElementsByTagName ("p"); // 각 태그를 순서대로 처리합니다. for (var i = 0; i
이는 동일한 태그,이 경우
태그를 사용하는 요소 그룹과 상호 작용하는 또 다른 변형입니다. 이 코드는 getElementsByTagName ()을 호출하여 이러한 요소의 배열을 가져옵니다. 그런 다음 ChangeStyles () 함수를 각 요소의 onmouseover 및 onmouseout 속성에 할당합니다. 결과적으로 페이지의 각
태그는 마우스를 가져 가면 반응합니다.
