HTML5中5個簡單實用的API_html5教學技巧-H5教程-PHP中文網

HTML5中5個簡單實用的API_html5教學技巧

WBOY

發布： 2016-05-16 15:47:59

原創

1730 人瀏覽過

這不能說我們虛榮，多少年來，基本的HTML API一直沒有任何發展，以至於當有一個小的新功能出現時，例如placeholder，都會讓我們露出新奇的眼神。儘管新式的瀏覽器中實現了許多HTML5特徵，但大部分程式設計師仍對一些小的、非常有用的API不了解或從未聽說。本文我將介紹一些這樣的API，並歡迎大家發掘出更多不為人知的HTML5 API！

Element.classList

classList API提供了我們多年來一種使用JavaScript工具庫來實現的控制CSS的基本功能：

複製程式碼

程式碼如下:

// 增加一個CSS類別
myElement.classList.add("newClass");
// 刪除一個CSS類別
myElement. classList.remove("existingClass");
// 檢查是否擁有一個CSS類別
myElement.classList.contains("oneClass");
// 反轉一個CSS類別的有無
myElement.classList.toggle("anotherClass");

這個新出現的API的主要價值體現就是：簡單實用。

ContextMenu API

這個新的ContextMenu API非常的有用：它並不會取代原有的右鍵選單，而是將你的自訂右鍵選單加入瀏覽器的右鍵選單：

複製程式碼

程式碼如下:

要注意的是，最好使用JavaScript動態的建立這些選單程式碼，因為選單事件最終要呼叫JavaScript執行任務，如果使用者禁止了JavaScript，右鍵選單也不會生成，他同時也不會看到選單。

Element.dataset

使用dataset API，程式設計師可以方便的取得或設定data-*自訂屬性：

複製程式碼程式碼如下:

/* 以下面的程式碼為例🎜>

*/
// 取得元素
var element = document.getElementById("myDiv");
// 取得id
var id = element.dataset.id;
// 讀取"data-my- custom-key" 的值
var customKey = element.dataset.myCustomKey;
// 修改成它值
element.dataset.myCustomKey = "Some other value";
// 結果是：
//

無須多說，跟classList一樣，簡單實用

window.postMessage API

連IE8也對postMessage API支援多年了，postMessage API的功能是可以讓你在兩個瀏覽器視窗或iframe之間傳遞訊息資料：

複製程式碼程式碼如下:

// 從A域上的視窗或iframe，傳送一則訊息到B域中的視窗或ifame

var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("來自第一個視窗的問候!");

// 在第二個不同域上的視窗或iframe接收訊息
window.addEventListener("message", function(event) {
// 檢驗域的合法性
if(event .origin == "http://www.jb51.net") {
// 輸出日誌資訊
console.log(event.data);
// 回饋訊息
event.source .postMessage("你也好嗎!");
}
]);

訊息體只能是字串，但你可以用JSON.stringify和JSON.parse將訊息轉換成更有意義的資料體！

autofocus屬性

autofocus屬性能夠讓BUTTON, INPUT, 或TEXTAREA元素在頁面加載完成時自動成為頁面焦點：

複製代碼

代碼如下:

在像Google搜尋頁面那樣的有固定模式的地方，autofocus屬性是最理想的一個功能。

瀏覽器對各個API的支援稍有不同，所以，在使用前先檢查一下對這些特徵的支援情況。再花點時間閱讀各個API的詳細說明，相信你會有更多的發現。