HTML5_html5 튜토리얼 기술의 5가지 간단하고 실용적인 API-H5 튜토리얼-php.cn

HTML5_html5 튜토리얼 기술의 5가지 간단하고 실용적인 API

WBOY

풀어 주다： 2016-05-16 15:47:59

원래의

1730명이 탐색했습니다.

이것은 우리에게 헛된 일이라고 말할 수 없습니다. 수년 동안 기본 HTML API가 전혀 개발되지 않았기 때문에 자리 표시자와 같은 작은 새로운 기능이 나타나면 우리를 새로 보이게 만들 것입니다. 많은 HTML5 기능이 최신 브라우저에 구현되어 있지만 대부분의 프로그래머는 여전히 작고 매우 유용한 일부 API에 대해 모르거나 들어본 적이 없습니다. 이 기사에서는 그러한 API 중 일부를 소개하고 더 많은 알려지지 않은 HTML5 API를 발견하는 모든 사람을 환영합니다!

요소.클래스목록

classList API는 수년간 JavaScript 도구 라이브러리를 사용하여 구현한 CSS 제어의 기본 기능을 제공합니다.

코드 복사

코드는 다음과 같습니다.

// CSS 클래스 추가
myElement.classList.add("newClass");
//CSS 클래스 삭제
myElement.classList.remove("existingClass");
// CSS 클래스가 있는지 확인
myElement.classList.contains("oneClass");
// CSS 클래스 존재 반전
myElement.classList.toggle("anotherClass");

이 새로운 API의 주요 가치는 간단하고 실용적입니다.

ContextMenu API

이 새로운 ContextMenu API는 매우 유용합니다. 원래의 오른쪽 클릭 메뉴를 대체하지는 않지만 사용자 정의 오른쪽 클릭 메뉴를 브라우저의 오른쪽 클릭 메뉴에 추가합니다.

코드 복사

코드는 다음과 같습니다.

메뉴 이벤트는 궁극적으로 JavaScript를 호출하여 작업을 수행하므로 JavaScript를 사용하여 이러한 메뉴 코드를 동적으로 생성하는 것이 가장 좋습니다. 동시에 메뉴가 표시되지 않습니다.

요소.데이터세트

프로그래머는 데이터세트 API를 사용하여 데이터*맞춤형 속성을 쉽게 가져오거나 설정할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

/* 다음 코드를 사용하세요 예

*/
// 요소 가져오기
var element = document.getElementById("myDiv");
// ID 가져오기
var id = element.dataset.id;
// "data -my-custom-key" 값 읽기
var customKey = element.dataset.myCustomKey;
// 다른 값으로 수정
element.dataset.myCustomKey = "다른 값";
// 결과는 다음과 같습니다.
//

< /div>

더 이상 말할 필요가 없습니다. classList처럼 간단하고 실용적입니다

window.post메시지 API

IE8도 수년 동안 postMessage API를 지원해 왔습니다. postMessage API의 기능은 두 개의 브라우저 창 또는 iframe 간에 정보 데이터를 전송할 수 있도록 하는 것입니다.

코드 복사

코드는 다음과 같습니다.

// 도메인 A의 윈도우나 iframe에서 도메인 B의 윈도우나 iframe으로 메시지를 보냅니다
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("첫 번째 창에서 인사드립니다!");

//다른 두 번째 도메인의 창이나 iframe에서 메시지 수신
window.addEventListener("message", function(event) {
// 도메인의 유효성을 확인하세요
if( event.origin == "http://www.jb51.net") {
// 로그 정보 출력
console.log(event.data);
// 피드백 메시지
이벤트. source.postMessage("당신도 잘 지내세요!");
}
]);

메시지 본문은 문자열만 가능하지만 JSON.stringify 및 JSON.parse를 사용하여 메시지를 보다 의미 있는 데이터 본문으로 변환할 수 있습니다!

자동 초점 속성

autofocus 속성을 사용하면 페이지가 로드될 때 BUTTON, INPUT 또는 TEXTAREA 요소가 자동으로 페이지 포커스가 됩니다.

코드 복사

코드는 다음과 같습니다.

Google 검색 페이지와 같이 고정된 패턴이 있는 장소에서는 자동 초점 속성이 가장 이상적인 기능입니다.

각 API에 대한 브라우저 지원이 조금씩 다르므로 사용하기 전에 해당 기능에 대한 지원을 확인하세요. 시간을 내어 각 API에 대한 자세한 설명을 읽어보시면 더 많은 내용을 찾으실 수 있을 것이라 믿습니다.