歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  data-*屬性的含義
 
  data-*屬性用于存儲頁面或應用程序的私有自定義數據是所有HTML元素上自定義data屬性,它存儲的數據能夠被JavaScript所利用,可以創建更好的用戶體驗。
 
  data-*屬性包含兩個部分分別為:
 
  屬性名:在屬性名中不能包含任何大寫字母,而且在前綴“data-”之后必須有一個字符,不能為空。
 
  屬性值:屬性值可以是任何字符串。
 
  <elementdata-*="somevalue">
 
  例
 
  data-animal-type="動物類"
 
  如何使用data-*屬性
 
  由于自定義數據屬性是有效的HTML5,因此可以在支持HTML5文檔類型的任何瀏覽器中使用它們:
 
  我們可以設置存儲在JavaScript動畫中可能需要的元素的初始高度或不透明度,也可設置通過JavaScript加載的Flash影片的參數以及存儲自定義網絡分析標記數據等等。
 
  例:
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="UTF-8">
 
  <title>Document</title>
 
  <style>
 
  ul{
 
  list-style:none;
 
  }
 
  li{
 
  width:50px;
 
  height:50px;
 
  background-color:pink;
 
  text-align:center;
 
  margin-left:10px;
 
  line-height:50px;
 
  float:left;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <script>
 
  functionshowDetails(animal){
 
  varanimalType=animal.getAttribute("data-animal-type");
 
  console.log(animal.innerHTML+"是一種"+animalType+"。");
 
  }
 
  </script>
 
  <p>點擊li時顯示其類別</p>
 
  <ul>
 
  <lionclick="showDetails(this)"id="owl"data-animal-type="動物類">小貓咪</li>
 
  <lionclick="showDetails(this)"id="salmon"data-animal-type="水果類">蘋果</li>
 
  </ul>
 
  </body>
 
  </html>



data-自定義數據




本文轉載自中文網
 

如需轉載,請注明文章出處和來源網址:http://www.khijtf.live/html5/h54327.shtml

江西多乐彩走势图今天 57157彩票游戏 做石材销售赚钱吗 爱我中华爱心捐赠怎么赚钱 学电脑学哪些比较好赚钱 新闻APP 收徒赚钱 陕西麻将技巧心得 最能赚钱的大学专业 ok99彩票首页 加盟酸奶赚钱吗 湖北孝感麻将卡五星 外汇上怎么赚钱 真人麻将下载 枣阳市现在什么能赚钱 有100张电话卡怎么赚钱 批发烟怎么赚钱吗 什么时候短线大概赚钱