집 >웹 프론트엔드 >H5 튜토리얼 >당신이 모르는 5가지 HTML5 인터페이스 소개_html5 튜토리얼 기술
당신이 모르는 5가지 HTML5 인터페이스 소개_html5 튜토리얼 기술
WBOY원래의
2016-05-16 15:48:581961검색
원본 주소: 당신이 몰랐던 존재하는 HTML5 API 5개 원본 날짜: 2010년 9월 27일 번역 날짜: 2013년 8월 7일 사람들이 "HTML5"라는 단어를 볼 때 "라고 하면 적어도 절반 이상의 사람들은 그녀를 섹시하고 매력적인 미인으로 생각할 것이지만 동시에 당신을 비참하게 만들 수 있는 유니콘으로 생각할 것이라고 추정됩니다. 당연하지 우리 개발자? 기본 API가 오랫동안(아마 1999~2009년) 정체되어 있어 "자리 표시자"와 같은 기본 추가 기능도 처리하는 데 오랜 시간이 걸린다는 사실을 알게 되었습니다. 현재 주류 브라우저는 많은 새로운 HTML5 기능을 구현했지만, 많은 개발자는 이러한 간단하고 유용한 API를 눈치채지 못했습니다. 이 시리즈 기사에서는 이러한 인터페이스 API를 소개하고 더 많은 개발자가 아직 널리 알려지지 않은 API를 탐색하도록 장려하기를 바랍니다. Element.classList 이 속성은 몇 년 동안 출시되었습니다. classList를 통해 JavaScript를 통해 기본 CSS의 클래스 속성을 조작할 수 있습니다. 코드는 다음과 같습니다. 🎜>
코드 복사코드는 다음과 같습니다.
// classList 속성을 사용합니다( Dom 요소, CSS 클래스 이름) functionggleClassList(element,cName){ // 1. classList API // 클래스를 전환하고, 존재하면 제거하고, 없으면 추가 if(element.classList.toggle){ element .classList.toggle(cName); return true; } // 실제로 이 함수가 지원되는 경우 , // 그러면 다음 코드는 실행되지 않습니다. 이는 단지 데모용이므로 유연하게 사용하십시오. // 2. classList API // 요소의 클래스 속성에 이 CSS 클래스가 포함되어 있는지 여부 var hasHide = element.classList.contains(cName); // if(hasHide){ // 3. classList API // 숨기기 클래스 요소를 제거합니다. classList.remove(cName); } else { // 4. classList API // 숨기기 클래스 추가 element.classList.add(cName) } return true; };
ContextMenu API 테스트 후 chrome28이 작동하지 않습니다. . . 새로운 API인 ContextMenu는 뛰어난 인터페이스입니다. 이 인터페이스를 사용하면 브라우저의 기본 마우스 오른쪽 버튼 클릭 메뉴를 재정의하는 대신 브라우저의 컨텍스트 메뉴(오른쪽 클릭 메뉴)에 메뉴 항목을 쉽게 추가할 수 있습니다. 페이지에서 JS 스크립트를 비활성화할 때 중복되는 HTML 코드를 방지하려면 js 스크립트를 사용하여 메뉴 컨텍스트 메뉴를 동적으로 생성하는 것이 좋습니다. 코드는 다음과 같습니다.
코드를 복사하세요코드는 다음과 같습니다.
보려면 이 영역을 클릭하세요. 메뉴
;
Element.dataset Dataset(dataset) API를 사용하면 개발자는 DOM 요소에서 data- 접두사로 시작하는 속성 값을 설정(설정)하고 가져오(가져오기)할 수 있습니다. 코드는 다음과 같습니다.
코드를 복사하세요
코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
function testDataset(){ // var intro = document.getElementById("intro")// 이 ID는 아닙니다. 속성이지만 data-id var id = intro.dataset.id; // data-website var website = intro.dataset.website;// data-blog- URL, 카멜 케이스.. var blogUrl = intro.dataset.blogUrl; // data-my-name var myName = intro.dataset.myName // var msg = "qq:" id ",website:" 웹사이트 ",blogUrl:" blogUrl ",myName:" myName
// warn(msg); };
말할 것도 없고, classList와 마찬가지로 간단하지만 실용적입니다. (생각해 보세요. 일부 상호 작용과 백그라운드 및 프런트 엔드 JS의 분리가 변경되었나요?)
window.postMessage API
IE8은 몇 년 동안 postMessage API를 지원해 왔으며 이 API는 window를 허용합니다. 및 iframe 요소가 서로 통신합니다. 교차 도메인 지원. 코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
// 도메인 1의 창이나 프레임에서 다른 도메인을 호스팅하는 iframe으로 메시지를 보냅니다.
var iframeWindow = document.getElementById("iframe").contentWindow
iframeWindow.postMessage("첫 번째 창에서 안녕하세요. !"); // 다른 호스트의 iframe 내부에서 메시지 수신 window.addEventListener("message", function(event) { // 보내는 도메인을 신뢰하는지 확인하세요 if(event.origin = = "http://davidwalsh.name") { // 메시지 로그아웃 console.log(event.data) // 메시지 보내기 event.source.postMessage ("안녕하세요!"); } ]); // 메시지는 문자열 형식의 데이터만 허용하지만 JSON.stringify 및 JSON.parse를 사용하여 더 많은 데이터를 전달할 수 있습니다. 의미 있는 메시지.
autofocus 속성
autofocus 속성은 페이지가 로드될 때 특정 BUTTON, INPUT 또는 TEXTAREA 요소에 자동으로 초점을 맞추도록 합니다.
코드 복사
코드는 다음과 같습니다.
autofocus 속성은 주로 단순 입력 페이지에서 사용됩니다. 자세한 내용은 autofocus 속성을 참조하세요. 브라우저 제조사마다 이러한 API를 지원하는 방식이 다르기 때문에 사용하기 전에 호환성을 확인하고 읽어보는 것이 가장 좋습니다. 위에 나열된 API에 대해 자세히 알아보고 마스터하게 됩니다.
부분에 대한 테스트 코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
5 HTML5 API 인터페이스
<script> <br>// 경고 메시지 표시<br>function warning(msg){ <br>warn || "알 수 없는 경고입니다." <br>if(window.console){ <br>console.warn(msg); <br>} else { <br>alert(msg) <br>} <br>}// classList 사용 attribute (Dom 요소, CSS 클래스 이름) <br>functionggleClassList(element, cName){ <br>// 1. classList API <br>// 클래스를 전환하고, 존재하면 제거하고, 없으면 추가합니다. 존재 <br>if (element.classList.toggle){ <br>element.classList.toggle(cName); <br>return true; <br>} <br>// 실제로 이 함수는ggleClassList입니다. 지원됨, <br> // 그러면 다음 코드는 실행되지 않습니다. 데모용이므로 유연하게 적용해 주세요. <br>// 2. classList API <br>// 요소의 클래스 속성에 이 CSS가 포함되어 있는지 여부 class <br>var hasHide = element.classList.contains(cName); <br>// <br>if(hasHide){ <br>// 3. classList API <br>// 숨기기 클래스 <br>요소 제거 .classList.remove( cName); <br>} else { <br>// 4. classList API <br>// 숨기기 클래스 추가 <br>element.classList.add(cName); return true; <br>// className 속성 사용(Dom 요소, css 클래스 이름) <br>functionggleClassName(element, cName){ <br>var className = element.className || 🎜>// 시작과 끝의 공백을 제거합니다 <br>cName = cName.replace(/^s*|s*$/g,"") <br>// 중간에 공백이 있는 경우 cName을 잘 처리하려면 분할해서 처리하면 됩니다. <br>var BlankReg = /s / <br>if(blankReg.test(cName)){ <br> warning("'" cName "'contains 공백 문자 in the middle"); <br>return false; <br>} <br>// 일반적으로 b는 표시되는 연속 문자의 경계를 나타내며 다음과 같이 이해할 수 있습니다. <br>// "hide2 hide hide myname" 그러면 <br>// hide2 전후에 가상이 있습니다. hide 전후에도 b가 있습니다. <br>// 하지만 hi와 de 사이에는 없습니다. if (rep.test(className)){ <br>className = className.replace(rep,"") <br>} else { <br>className = " " cName; / 새 클래스명을 교체합니다. <br>element.className = className; <br>return true; <br>}; <br>// 함수, 토글(요소 ID, 클래스 이름) <br>functionggleClass(elementId, cName){ <br>// DOM 요소 가져오기 <br>var element = document.getElementById(elementId) <br>// 요소가 존재하지 않는 경우 <br>if(!element){ <br>warn("ID가 " elementId "인 요소 존재하지 않습니다. "); <br>false를 반환합니다. <br>} <br>if(!element.classList){ <br>warn("ID가 " elementId "인 요소는 classList 속성을 지원하지 않으며 다른 속성을 사용합니다. 달성하는 것을 의미합니다.") ; <br>returnggleClassName(element,cName); <br>} else { <br>returnggleClassList(element,cName); <br>} <br>}; <br>function testDataset( ){ <br>/ / <br>var intro = document.getElementById("intro") <br>// 이는 id 속성이 아니라 data-id 값입니다. <br>var id = intro .dataset.id <br>/ /data-website <br>var website = intro.dataset.website; <br>// data-blog-url, camel case.. <br>var blogUrl = intro.dataset. blogUrl;// data -my-name <br>var myName = intro.dataset.myName <br>// <br>var msg = "qq:" id <br> ",website:" 웹사이트 <br> ",blogUrl:" blogUrl <br> ",myName:" myName <br>// <br>warn(msg) <br>}// dom 로드 후 실행 <br>window.addEventListener("DOMContentLoaded" , function() { <br>var open = document.getElementById("open"); <br>var close = document.getElementById("close"); <br>open.addEventListener ("click",function(){ <br>// <br>toggleClass("diary2","hide"); <br>toggleClass("loading","hide"); <br>}); >close.addEventListener("click", function(){ <br>// <br>toggleClass("diary2","hide"); <br>toggleClass("loading","hide"); <br>} ); <br>testDataset() <br>}, <br></script> div>