あなたが知らなかった HTML5 の 5 つの新機能

この記事では主に、あなたが詳しく知らない HTML5 のいくつかの新機能を紹介し、より未知の HTML5 API を共有します。興味のある友人はそれを参照してください あなたは群衆の中で「HTML5」について話します。そして、エキゾチックなダンサーやユニコーンが「私はクールだ、それを知っている」という独特の雰囲気を持って部屋の真ん中にやって来たように感じるかもしれません。これは無駄とは言えませんが、長年にわたって基本的な HTML API がまったく開発されていないため、プレースホルダーなどの小さな新しい機能が登場すると、目新しさが感じられます。多くの HTML5 機能が最新のブラウザーに実装されていますが、ほとんどのプログラマーは、いくつかの小さくて非常に便利な API をまだ知らないか、聞いたこともありません。この記事では、そのような API をいくつか紹介します。皆さんも、さらに未知の HTML5 API を発見してください。

Element.classList

classList API は、JavaScript ツール ライブラリを使用して長年実装してきた CSS を制御するための基本機能を提供します。メイン新しい API の値表現はシンプルで実用的です。他のいくつかの classList 機能を紹介するこの記事をお読みください。

ContextMenu API

この新しい ContextMenu API は非常に便利です。元の右クリック メニューを置き換えるのではなく、カスタムの右クリック メニューをブラウザの右クリック メニューに追加します:

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

ログイン後にコピー

• 
  

ユーザーが JavaScript を無効にすると、メニュー イベントは最終的に JavaScript を呼び出してタスクを実行するため、これらのメニュー コードを動的に作成するには JavaScript を使用するのが最善であることに注意してください。クリックメニューは生成されず、同時にメニューは表示されません。

Element.dataset

データセット 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>

  ログイン後にコピー
  
  

これ以上言う必要はありませんclassList と同様に、シンプルで実用的です

window.postMessage API

IE8 でも長年にわたり postMessage API をサポートしています。postMessage API の機能は、2 つのブラウザ ウィンドウまたは iframe 間で情報データを転送できるようにすることです:

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>

ログイン後にコピー

• 
  

メッセージ本文は

string

のみですが、

JSON

.
string

ifyとJSON.parseを使用してメッセージをより意味のあるデータ本文に変換できます。 ！

• autofocus 属性
  

autofocus 属性を使用すると、ページが読み込まれるときに、BUTTON、INPUT、または TEXTAREA 要素が自動的にページ フォーカスになります。
「いいね！」で検索google ページのように決まったパターンがある場合、オートフォーカス属性は最も理想的な機能です。

各 API に対するブラウザのサポートは若干異なるため、使用する前にこれらの機能のサポートを確認してください。時間をかけて各 API の詳細な説明を読んでください。さらに多くのことがわかると思います。

以上があなたが知らなかった HTML5 の 5 つの新機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。