あなたが知らなかった HTML5 の 5 つの新機能-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-03-13 17:15:11

オリジナル

2023 人が閲覧しました

この記事では主に、あなたが詳しく知らない 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を使用してメッセージをより意味のあるデータ本文に変換できます。！