ホームページ

ウェブフロントエンド

H5 チュートリアル

あなたの知らない 5 つの HTML5 インターフェイスの紹介_html5 チュートリアルスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

元のアドレス: 存在を知らなかった 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
テスト後、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 要素が相互に通信します。
クロスドメインのサポート。コードは次のとおりです:

コードをコピー

コードは次のとおりです: // ドメイン 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 ("Hello back!");
}
]);
// メッセージでは文字列型のデータのみが許可されますが、JSON.stringify と JSON.parse を使用してさらに多くのデータを渡すことができます意味のあるメッセージ。

autofocus 属性

autofocus 属性は、ページの読み込み時に指定された BUTTON、INPUT、または TEXTAREA 要素に自動的にフォーカスを取得するようにします。

コードをコピー

コードは次のとおりです:

autofocus 属性は主に単純な入力ページで使用されます。詳細については、autofocus 属性を参照してください。
各ブラウザの製造元がこれらの API をサポートしているため、使用する前に互換性を確認し、時間をかけて読むことをお勧めします。上記のリストにある API について詳しく学び、マスターしてください。
部分のテストコードは次のとおりです:

コードをコピーします

コードは次のとおりです:

5 知らない HTML5 API のデモ

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7380

Java チュートリアル

1628

CakePHP チュートリアル

1357

Laravel チュートリアル

1267

PHP チュートリアル

1216

Related knowledge

HTML5 Webサイトにオーディオを追加する方法は？ Mar 10, 2025 pm 03:01 PM

この記事では、＆lt; audio＆gt;を使用してHTML5にオーディオを埋め込む方法について説明します。フォーマット選択のベストプラクティス（MP3、OGG Vorbis）、ファイルの最適化、および再生のためのJavaScriptコントロールを含む要素。複数のオーディオfを使用して強調しています

ユーザー入力にHTML5フォームを使用する方法は？ Mar 10, 2025 pm 02:59 PM

この記事では、HTML5フォームを作成および検証する方法について説明します。＆lt; form＆gt;の詳細要素、入力タイプ（テキスト、電子メール、番号など）、および属性（必須、パターン、MIN、最大）。 HTML5の利点は、古い方法よりも形成されます

Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか？ Mar 18, 2025 pm 02:16 PM

この記事では、Geolocation APIを使用してユーザーの場所のプライバシーと許可を管理し、アクセス許可を要求するためのベストプラクティスを強調し、データセキュリティを確保し、プライバシー法を遵守することについて説明します。

HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか？ Mar 13, 2025 pm 07:51 PM

この記事では、HTML5ページの可視性APIを使用して、ページの可視性を検出し、ユーザーエクスペリエンスを向上させ、リソースの使用量を最適化します。重要な側面には、メディアの一時停止、CPU負荷の削減、視認性の変化に基づいて分析の管理が含まれます。

ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか？ Mar 13, 2025 pm 08:00 PM

この記事では、ビューポートメタタグを使用してモバイルデバイスのページスケーリングを制御し、最適な応答性とパフォーマンスのために幅や初期スケールなどの設定に焦点を当てています。

HTML5とJavaScriptでインタラクティブなゲームを作成する方法は？ Mar 10, 2025 pm 06:34 PM

この記事では、JavaScriptを使用してインタラクティブなHTML5ゲームの作成を詳述しています。ゲームデザイン、HTML構造、CSSスタイリング、JavaScriptロジック（イベント処理とアニメーションを含む）、およびオーディオ統合をカバーしています。必須JavaScriptライブラリ（Phaser、PI

インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか？ Mar 18, 2025 pm 02:17 PM

この記事では、HTML5ドラッグアンドドロップAPIを使用してインタラクティブなユーザーインターフェイスを作成し、要素をドラッグ可能にし、キーイベントを処理し、カスタムフィードバックを使用してユーザーエクスペリエンスを強化する手順を作成する方法について説明します。また、aへの一般的な落とし穴についても説明します