原文網址：5 HTML5 APIs You Didn't Know Existed 原文日期： 2010年09月27日Element.classList 這個屬性已經發布了好幾年，透過classList,我們可以透過JavaScript來操縱底層css的class屬性.
};
ContextMenu API
測試chrome28不管用。 。 。
新的API，ContextMenu 是極好的介面： 此介面可讓你簡單地新增選單項目到瀏覽器的上下文選單(右鍵選單)，而不是去覆寫瀏覽器的預設右鍵選單。
要注意的是，你最好採用js腳本來動態的建立選單contextmenu，這樣可以避免頁面停用JS腳本的情況 下出現多餘的HTML程式碼。
代碼如下：
Element.dataset 資料集(dataset) API 允許開發者對DOM元素設定(set)和取得(get) 以 data- 前綴開頭的屬性值。
代碼如下：
代碼如下:
var msg = "qq:" id
window.postMessage API IE8 已經支援postMessage API 好幾年了，此API允許window和iframe 元素之間互相傳遞訊息。 跨域支援哦。 程式碼如下：
// Ffrom amedow on domain 1, send a message to the iframe which hosts another domain
// Make sure we trust the sending domain
if(event.ori = = "http://davidwalsh.name") {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage ("Hello back!"); autofocus 屬性確保頁面載入後，給定的 BUTTON,INPUT或 TEXTAREA 元素能夠自動獲得焦點。 複製程式碼程式碼如下:
程式碼如下:
Hi!
autofocus 屬性主要用在簡單的輸入頁，詳情請參考：autofocus 屬性各瀏覽器廠商對這些API的支持度各不相同，所以在使用之前最好檢測一下兼容性，花一些時間來閱讀上面所列出的API，您將會對他們了解並掌握更多。 部分的測試程式碼如下： 複製程式碼程式碼如下:
5個你不知道的HTML5 API介面示範 <script> <br />// 顯示警告訊息<br />function warn(msg){ <br />warn = warn || "一個未知警告!"; <br />if(window.console){ <br /> console.warn(msg); <br />} else { <br />alert(msg); <br />} <br />}; <br />// 使用classList屬性(Dom元素,css類別) <br />function toggleClassList(element,cName){ <br />// 1. classList API <br />// 切換類別,有則移除，沒有則加入<br />if(element.classList.toggle){ <br />element.classList .toggle(cName); <br />return true; <br />} <br />// !!! 其實，本函數toggleClassList 如果支援的話， <br />// 那麼下面的程式碼就不會被執行，此處僅供示範,請靈活應用<br />// 2. classList API <br />// element 的class屬性是否包含hide 這個CSS類別<br />var hasHide = element.classList.contains(cName); <br />/ / <br />if(hasHide){ <br />// 3. classList API <br />// 移除hide類別<br />element.classList.remove(cName); <br />} else { <br />// 4. classList API <br />// 新增hide類別<br />element.classList.add(cName); <br />} <br />return true; <br />}; <br />// 使用className屬性(Dom元素,css類別名稱) <br />function toggleClassName(element,cName){ <br />var className = element.className || ""; <br />// 去掉首尾的空白<br />cName = cName.replace(/^ s*|s*$/g,""); <br />// cName 中間如果含有空白字符，則失敗. 如果要好好處理，可以拆分為數組，單個處理<br />var blankReg = /s / ; <br />if(blankReg.test(cName)){ <br />warn("'" cName "'中間含有空白字元"); <br />return false; <br />} <br />// 正規， b表示可見連續字元的邊界，可以這麼理解: <br />// "hide2 hide hide myname" 那麼， <br />// hide2 的前後各有一個虛擬的b ,hide 前後也有， <br />// 但是hi和de之間則沒有。 <br />// g 表示單行全域<br />//var rep = /bhideb/g; <br />var rep = new RegExp("\b" cName "\b", "g"); <br />if (rep.test(className)){ <br />className = className.replace(rep,""); <br />} else { <br />className = " " cName; <br />} <br />// 取代新className。 <br />element.className = className; <br />return true; <br />}; <br />// 函數，切換(元素id，className) <br />function toggleClass(elementId,cName){ <br />//取得一個DOM元素<br />var element = document.getElementById(elementId); <br />// 如果不存在元素<br />if(!element){ <br />warn("id為" elementId "的元素不存在"); <br />return false; <br />} <br />if(!element.classList){ <br />warn("id為" elementId "的元素不支援classList屬性，將使用其他手段來實作") ; <br />return toggleClassName(element,cName); <br />} else { <br />return toggleClassList(element,cName); <br />} <br />}; <br />function testDataset(>} <br />}; <br />function testDataset(){ <br /> / <br />var intro = document.getElementById("intro"); <br />// 注意這個不是id屬性哦，是data-id 的值<br />var id = intro.dataset.id; <br />/ / data-website <br />var website = intro.dataset.website; <br />// data-blog-url,駝峰命名法.. <br />var blogUrl = intro.dataset.blogUrl; <br />// data -my-name <br />var myName = intro.dataset.myName; <br />// <br />var msg = "qq:" id <br /> ",website:" website <br /> ",blogUrl:" blogUrl <br /> ",myName:" myName <br />; <br />// <br />warn(msg); <br />}; <br />// dom載入後執行<br />window.addEventListener("DOMContentLoaded"DOMContentLoaded" , function() { <br />var open = document.getElementById("open"); <br />var close = document.getElementById("close"); <br />open.addEventListener("click",function(){ <br />// <br />toggleClass("diary2","hide"); <br />toggleClass("loading","hide"); <br />}); <br />close.addEventListener("click", function(){ <br />// <br />toggleClass("diary2","hide"); <br />toggleClass("loading","hide"); <br />}); <br />// <br />testDataset(); <br />}, false); <br /></script>
關閉 style="max-width:90%">
正在載入中
div>
style="max-width:90%"> 
