ホームページ > 記事 > ウェブフロントエンド > あなたの知らない 5 つの HTML5 インターフェイスの紹介_html5 チュートリアル スキル
あなたの知らない 5 つの HTML5 インターフェイスの紹介_html5 チュートリアル スキル
- WBOYオリジナル
- 2016-05-16 15:48:581940ブラウズ
元のアドレス: 存在を知らなかった 5 つの HTML5 API
元の日付: 2010 年 9 月 27 日
翻訳日: 2013 年 8 月 7 日
「HTML5」という単語が表示されるとき、または」と言われると、少なくとも半数の人が彼女をセクシーで魅力的な美女であると同時に、惨めな気持ちにさせるユニコーンだと考えるだろうと推測されています。
基本的な API が長い間 (おそらく 1999 年から 2009 年まで) 停滞しており、「プレースホルダー」のような基本的な追加機能ですら処理に時間がかかることに気づきました。
現在の主流のブラウザは多くの新しい HTML5 機能を実装していますが、多くの開発者はこれらのよりシンプルで便利な API に気づいていません。
この一連の記事では、これらのインターフェイス API を紹介し、より多くの開発者がまだ広く知られていない API を探索することを奨励したいと考えています。
Element.classList
この属性は数年前からリリースされており、classList を通じて JavaScript を通じて基になる CSS のクラス属性を操作できます。
コードは次のとおりです。 🎜>
コードをコピーしますコードは次のとおりです:
// classList 属性を使用します ( Dom 要素、CSS クラス名)
function toggleClassList(element,cName){
// 1. classList API
// クラスを切り替え、存在する場合は削除し、存在しない場合は追加します
if(element.classList.toggle){
element .classList.toggle(cName);
return true;
}
// 実際、この関数 toggleClassList がサポートされている場合,
// その場合、以下のコードは実行されません。これはデモ用です。柔軟に使用してください。
// 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 function toggleClassList(element,cName){
// 1. classList API
// クラスを切り替え、存在する場合は削除し、存在しない場合は追加します
if(element.classList.toggle){
element .classList.toggle(cName);
return true;
}
// 実際、この関数 toggleClassList がサポートされている場合,
// その場合、以下のコードは実行されません。これはデモ用です。柔軟に使用してください。
// 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;
};
テスト後、chrome28 は動作しません。 。 。
新しい API である ContextMenu は、優れたインターフェイスです。このインターフェイスを使用すると、ブラウザのデフォルトの右クリック メニューをオーバーライドするのではなく、ブラウザのコンテキスト メニュー (右クリック メニュー) にメニュー項目を簡単に追加できます。 ページで JS スクリプトが無効になっている場合、冗長な HTML コードを避けるために、JS スクリプトを使用してメニューのコンテキストメニューを動的に作成することをお勧めします。
コードは次のとおりです:
コードをコピーしますコードは次のとおりです:
<-- !!!理由はわかりませんが、この設定は私のブラウザでは機能しません。 -->
この領域をクリックして表示しますメニュー
Element.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; = "qq:" id
",website:" ウェブサイト
",blogUrl:" blogUrl
",myName:" myName
//
warn(msg);
};
classList と同様に、シンプルですが実用的です。 (考えてみてください。バックグラウンド JS とフロントエンド JS の相互作用や切り離しが変更されたのでしょうか?)
window.postMessage API
IE8 は数年間 postMessage API をサポートしてきましたが、この API では window が使用できます。と iframe 要素が相互に通信します。 //
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; = "qq:" id
",website:" ウェブサイト
",blogUrl:" blogUrl
",myName:" myName
//
warn(msg);
};
classList と同様に、シンプルですが実用的です。 (考えてみてください。バックグラウンド JS とフロントエンド JS の相互作用や切り離しが変更されたのでしょうか?)
window.postMessage API
クロスドメインのサポート。 コードは次のとおりです:
コードをコピー
コードは次のとおりです: // ドメイン 1 のウィンドウまたはフレームから、別のドメインをホストする iframe にメッセージを送信します。 var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("最初のウィンドウからこんにちは!"); window.addEventListener("message", function(event) {
// 送信ドメインを信頼していることを確認してください
if(event.origin = = "http://davidwalsh.name") {
// メッセージをログアウトします
console.log(event.data)
// メッセージを送信します
event.source.postMessage ("Hello back!");
}
]);
// メッセージでは文字列型のデータのみが許可されますが、JSON.stringify と JSON.parse を使用してさらに多くのデータを渡すことができます意味のあるメッセージ。
autofocus 属性
autofocus 属性は、ページの読み込み時に指定された BUTTON、INPUT、または TEXTAREA 要素に自動的にフォーカスを取得するようにします。
// 送信ドメインを信頼していることを確認してください
if(event.origin = = "http://davidwalsh.name") {
// メッセージをログアウトします
console.log(event.data)
// メッセージを送信します
event.source.postMessage ("Hello back!");
}
]);
// メッセージでは文字列型のデータのみが許可されますが、JSON.stringify と JSON.parse を使用してさらに多くのデータを渡すことができます意味のあるメッセージ。
autofocus 属性
autofocus 属性は、ページの読み込み時に指定された BUTTON、INPUT、または TEXTAREA 要素に自動的にフォーカスを取得するようにします。
コードをコピー
コードは次のとおりです:
autofocus 属性は主に単純な入力ページで使用されます。詳細については、autofocus 属性を参照してください。
各ブラウザの製造元がこれらの API をサポートしているため、使用する前に互換性を確認し、時間をかけて読むことをお勧めします。上記のリストにある API について詳しく学び、マスターしてください。
部分のテスト コードは次のとおりです:
コードをコピーします