당신이 몰랐던 HTML5의 5가지 새로운 기능

이 글은 여러분이 자세히 알지 못하는 HTML5의 몇 가지 새로운 기능을 주로 소개하고, 관심 있는 친구들이 참고할 수 있도록 더 알려지지 않은 HTML5 API를 공유합니다.

군중 속에서 "HTML5"에 대해 이야기하면 이국적인 댄서나 유니콘이 방 한가운데로 다가와 "멋져요, 알아요"라는 뚜렷한 톤으로 다가오는 기분이 들 수 있습니다. 이것은 우리에게 헛된 일이라고 말할 수 없습니다. 수년 동안 기본 HTML API는 아무런 개발도 하지 않았기 때문에 플레이스홀더와 같은 작은 새로운 기능이 등장하면 우리를 새롭게 보이게 만들 것입니다. 많은 HTML5 기능이 최신 브라우저에 구현되어 있지만 대부분의 프로그래머는 여전히 작고 매우 유용한 일부 API에 대해 모르거나 들어본 적이 없습니다. 이 기사에서는 그러한 API 중 일부를 소개하고 더 많은 알려지지 않은 HTML5 API를 발견하는 모든 사람을 환영합니다!

Element.classList

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

XML/HTML Code复制内容到剪贴板
// 增加一个CSS类   
myElement.classList.add("newClass");   
  
// 删除一个CSS类   
myElement.classList.remove("existingClass");   
  
// 检查是否拥有一个CSS类   
myElement.classList.contains("oneClass");   
  
// 反转一个CSS类的有无   
myElement.classList.toggle("anotherClass");

• 
  

이 신흥 API의 주요 가치 구현 간단하고 실용적입니다. 몇 가지 다른 classList 기능을 소개하는 이 기사를 읽어보세요.

ContextMenu API

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

XML/HTML Code复制内容到剪贴板
<section contextmenu="mymenu">  
  
  <!-- 添加菜单 -->  
  <menu type="context" id="mymenu">  
   <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>  
   <menu label="Share on..." icon="/images/share_icon.gif">  
     <menuitem label="Twitter" icon="/images/twitter_icon.gif" 
     onclick="goTo(&#39;//twitter.com/intent/tweet?text=&#39; + document.title + &#39;:  &#39; + window.location.href);"></menuitem>  
     <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" 
     onclick="goTo(&#39;//facebook.com/sharer/sharer.php?u=&#39; + window.location.href);"></menuitem>  
   </menu>  
 </menu>  
</section>

• 
  

이러한 메뉴 코드를 동적으로 생성하려면 JavaScript를 사용하는 것이 가장 좋습니다. 메뉴 이벤트는 결국 작업을 수행하기 위해 JavaScript를 호출하기 때문입니다. 사용자가 JavaScript를 비활성화하면 마우스 오른쪽 버튼 클릭 메뉴가 작동하지 않습니다. 생성되었지만 그는 그렇지 않을 것입니다. 메뉴가 표시됩니다.

Element.dataset

프로그래머는 데이터 세트 API를 사용하여 쉽게 데이터를 가져오거나 설정할 수 있습니다.-* 사용자 정의

속성 :

XML/HTML Code复制内容到剪贴板
/*  以下面的代码为例   
  
 <p id="myp" data-name="myp" data-id="myId" data-my-custom-key="This is the value"></p>  
  
*/   
  
// 获取元素   
var element = document.getElementById("myp");   
  
// 获取id   
var id = element.dataset.id;   
  
// 读取 "data-my-custom-key" 的值   
var customKey = element.dataset.myCustomKey;   
  
// 修改成其它值   
element.dataset.myCustomKey = "Some other value";   
  
 // 结果是：   
 //    <p id="myp" data-name="myp" data-id="myId" data-my-custom-key="Some other value"></p>

• 
  

더 말할 필요도 없이 그냥 classList처럼 간단하고 실용적입니다

window.postMessage API

IE8에서도 postMessage API를 수년 동안 지원해 왔습니다. 두 브라우저 창 또는 iframe 간 정보 데이터 전송:

JavaScript Code复制内容到剪贴板
// 从A域上的窗口或iframe，发送一条信息到B域中的窗口或ifame   
var iframeWindow = document.getElementById("iframe").contentWindow;   
iframeWindow.postMessage("来自第一个窗口的问候!");   
  
// 在第二个不同域上的窗口或iframe接收消息   
window.addEventListener("message", function(event) {   
 // 检验域的合法性   
 if(event.origin == "http://www.webhek.com") {   
  // 输出日志信息   
  console.log(event.data);   
  
  // 反馈消息   
  event.source.postMessage("你也好吗!");   
 }   
]);

• 
  

메시지 본문은

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

autofocus 속성

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

XML/HTML Code复制内容到剪贴板
<input autofocus="autofocus" />  
<button autofocus="autofocus">Hi!</button>  
<textarea autofocus="autofocus"></textarea>

• 
  

은 Google 검색 페이지와 같이 고정된 패턴이 있습니다. 여기서 자동 초점 속성은 가장 바람직한 기능입니다.

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

위 내용은 당신이 몰랐던 HTML5의 5가지 새로운 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!