您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關html5中有什么新屬性的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
html5有新屬性,例contextmenu、contentEditable、hidden、draggable、“data-*”、placeholder、required、pattern、autofocus、autocomplete等等。
本教程操作環境:windows7系統、HTML5版、Dell G3電腦。
contextmenu的作用是指定右鍵菜單。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" style="height:900px; background: lightgreen;" contextmenu="menuShare"> </div> <menu id="menuShare" type="context"> <menuitem label="分享到QQ空間" onclick="alert('QQ');"></menuitem> <menuitem label="分享到朋友圈" onclick="alert('朋友圈');"></menuitem> <menuitem label="分享到微博" onclick="alert('微博');"></menuitem> </menu> </body> </html>
運行效果:
contextmenu 在Html5中,每個元素新增了一個屬性:contextmenu, contextmenu 是上下文菜單,即鼠標右擊元素會出現一個菜單。
menu 要實現鼠標右擊元素會出現一個菜單,還必須了解HTML5里新增的另一個元素:menu 顧名思義menu是定義菜單的, menu 元素屬性: type :菜單類型屬。 有三個值 1)context:上下文; 2)toolbar:工具欄;3)list:列表
<menuitem>
<menu> </menu>內部可以嵌入一個一個菜單項,即<menuitem></menuitem>。
menuitem 屬性:
label:菜單項顯示的名稱
icon:在菜單項左側顯示的圖標
onclick:點擊菜單項觸發的事件
規定是否可編輯元素的內容
屬性值:
true -----可以編輯元素的內容
false -----無法編輯元素的內容
inherit -----繼承父元素的contenteditable屬性
當為空字符串時,效果和true一致。
當一個元素的contenteditable狀態為true(contenteditable屬性為空字符串,或為true,或為inherit且其父元素狀態為true)時,意味著該元素是可編輯的。否則,該元素不可編輯。
document.body.contentEditable=true; 可以修改已發布網站
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>contentEditable屬性</title> </head> <body> <h3>contentEditable屬性</h3> <div contenteditable="true"> Hello contentEditable </div> </body> </html>
hidden屬性用于隱藏該元素。一旦使用了此屬性,則該元素就不會在瀏覽器中被顯示
2個布爾值
true 規定元素是可見。
false 規定元素是不可見。
<div hidden="hidden"> Hello Hidden </div>
為了兼容一些不支持該屬性的瀏覽器(IE8),可以在CSS中加如下樣式:
*[hidden]{ display: none; }
var p1=document.querySelector("body #p1"); p1.innerHTML+=" +++";
規定元素是否可拖拽
3個枚舉值
true 規定元素是可拖動的。
false 規定元素是不可拖動的。
auto 使用瀏覽器的默認特性。
示例:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="Scripts/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <title></title> <style> #p1, #p3 { height: 200px; width: 200px; border: 1px solid #00f; margin-bottom: 10px; } #p2 { height: 100px; width: 100px; background: yellow; } </style> <script> var p1, p2, p3, msg; window.onload = function() { p1 = document.getElementById("p1"); p2 = document.getElementById("p2"); p3 = document.getElementById("p3"); msg = document.getElementById("msg"); p2.ondragstart=function(){ msg.innerHTML+="p2開始拖動了<br/>"; } p2.ondrag=function(){ msg.innerHTML+="拖動中<br/>"; } p2.ondragend=function(){ msg.innerHTML+="拖動結束<br/>"; } p1.ondragover = function(e) { e.preventDefault(); } p1.ondrop = function(e) { p1.appendChild(p2); } p3.ondragover = function(e) { e.preventDefault(); } p3.ondrop = function(e) { p3.appendChild(p2); } $("#p1").data("name","電池"); alert($("#p1").data("name")); p1.setAttribute("data-order-price",998.7); alert(p1.getAttribute("data-order-price")); } </script> </head> <body> <p id="p1" data-order-price="98.5" data-name="充電寶"></p> <p id="p3"></p> <p id="p2" draggable="true"></p> <h4 id="msg"></h4> </body></html>
運行結果:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <p style="height: 300px; background: lightgoldenrodyellow;" ondrop="ondropEvent(event)" ondragover="ondragoverEvent(event)"></p> <img src="img/x.png" width="200" draggable="true" ondragstart="ondragstartEvent(event)"/> <img src="img/tv.png" width="200" draggable="true" ondragstart="ondragstartEvent(event)"/> <script> var target; function ondragstartEvent(e){ target=e.target; //記住當前被拖動的對象 console.log(e.target); } function ondropEvent(e){ e.preventDefault(); e.target.appendChild(target); } function ondragoverEvent(e){ e.preventDefault(); } </script></body></html>
data-*屬性能讓用戶自定義屬性的方式來存儲數據
<span data-order-amount=100></span>
取值:
getAttribute('data-order-amount')
dataset.orderAmount
jQuery中的data()方法同樣可以訪問
使用jQuery與javascript添加與獲取data屬性示例:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>data-*</title> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h3>data-*</h3> <p id="p1" data-student-name="Tom" data-stu='{"a":1,"b":2}'></p> <button onclick="addData()">添加數據</button> <button onclick="getData()">獲取數據</button> <script type="text/javascript"> var p1=document.getElementById("p1"); function addData() { //給p1添加屬性data-student-name,值為rose p1.setAttribute("data-student-name","Rose"); $("#p1").data("stu-mark","99分"); } function getData() { //原生JavaScript //alert(p1.getAttribute("data-student-name")); //jQuery alert($("#p1").data("student-name")); alert($("#p1").data("stu").a); alert($("#p1").data("stu-mark")); } var x="{a:1}"; alert(eval("("+x+")").a); </script> </body></html>
運行效果:
這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯,除了Firefox,其他標準瀏覽器都能很好的支持
<input placeholder="請輸入用戶名">
<p> <label>郵箱:</label> <input type="email" name="mail" id="mail" value="" placeholder="請輸入郵箱"/> </p>
約束表單元在提交前必須輸入值。
<p> <label>博客:</label> <input type="url" name="blog" id="blog" value="" required="required"/> </p>
約束用戶輸入的值必須與正則表達式匹配。
<p> <label>帳號:</label> <input type="text" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符 </p>
<p> <label>博客:</label> <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/> </p>
讓指定的表單元素獲得焦點。
當表單元素設置了自動完成功能后,會記錄用戶輸入過的內容,雙擊表單元素會顯示歷史輸入。
<input type="text" name="username" autocomplete="on/off" />
該屬性默認是打開的。
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
<form action="demo_form.asp" method="get" novalidate="true"> <button formnovalidate="formnovalidate" >提交</button>
multiple 屬性規定輸入域中可選擇多個內容,如:email 和 file
<input type="file" multiple="multiple” />
<p> <label>相片:</label> <input type="file" multiple="multiple"/> </p>
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>HTML5新的表單元素</title> </head> <body> <h3>HTML5新的表單元素</h3> <form> <p> <label>姓名:</label> <input type="text" required="required"/> </p> <p> <label>相片:</label> <input type="file" multiple="multiple"/> </p> <p> <label>帳號:</label> <input type="text" name="username" autocomplete="on" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符 </p> <p> <label>郵箱:</label> <input type="email" name="mail" id="mail" value="" placeholder="請輸入郵箱"/> </p> <p> <label>博客:</label> <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/> </p> <p> <label>生日:</label> <input type="date"> </p> <p> <label>身高:</label> <input type="number" max="226" min="80" step="10" value="170" /> </p> <p> <label>膚色:</label> <input type="color" onchange="document.bgColor=this.value" /> </p> <p> <label>體重:</label> <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/> <span id="rangeValue"></span> </p> <button formnovalidate="formnovalidate">提交</button> <script type="text/javascript"> function showValue(val){ document.getElementById("rangeValue").innerHTML=val; } </script> </form> </body></html>
感謝各位的閱讀!關于“html5中有什么新屬性”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。