微信小程序H5——自定義屬性data-*

本文轉載自查看原文 2020-01-06 20:26 1056 H5自定義屬性data-*詳解/ 微信小程序/ 微信小程序H5——自定義屬性data-*

背景

HTML5中增加了很多屬性，我們使用 data-* 屬性來嵌入自定義數據。也就是說這個data-*是可以用來存儲數據的，data-的后面緊跟自己起的一個變量名，然后后面賦予一個值，這個值就會被存儲起來。然后獲取數據通過js來實現。

用法

HTML標簽中使用data-* 屬性嵌入數據

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li onclick="showDetails(this)" id="owl" data-animal-bird="bird">Owl</li>
      <li onclick="showDetails(this)" id="salmon" data-animal-fish="fish">Salmon</li>  
      <li onclick="showDetails(this)" id="tarantula" data-animal-spider="spider">Tarantula</li>  
    </ul>
  </body>
</html>

js中獲取

獲取方式一：通過dataset.XXX獲取

<script>
function showDetails(animal)
{
    var animalBird = animal.dataset.animalBird;
    console.log(animalBird); //bird

    var animalFish = animal.dataset.animalFish;
    console.log(animalFish); // fish

    var animalSpider = animal.dataset.animalSpider;
    console.log(animalSpider); //spider
}
</script>

獲取方式二：通過getAttribute("XXX")獲取

<script>
function showDetails(animal)
{
    var animalBird= animal.getAttribute("data-animal-bird");
    console.log(animalBird);--bird

    var animalFish = animal.getAttribute("data-animal-fish");
    console.log(animalFish );--fish

    var animalSpider = animal.getAttribute("data-animal-spider");
    console.log(animalSpider );--spider
}
</script>

注意事項

js中使用dataset.XXX獲取標簽中自定義屬性值時，標簽中的屬性值XXX中不可以包含特殊字符（‘-’除外）。
js中使用dataset.XXX獲取標簽中自定義屬性值時，如果標簽中的屬性值XXX中包含字符‘-’，需要使用駝峰式獲取自定義變量值。

舉例

不包含‘-’

<html> <body> <ul> <li onclick="showDetails(this)" id="owl" data-animalbird="bird">Owl</li> </ul> </body> </html>
<script>
function showDetails(animal)
{
    var animalBird = animal.dataset.animalbird;
    console.log(animalBird); //bird
}
</script>

包含‘-’

<html> <body> <ul> <li onclick="showDetails(this)" id="owl" data-animal-bird="bird">Owl</li> </ul> </body> </html>
<script>
function showDetails(animal)
{
    var animalBird = animal.dataset.animalBird; //駝峰式命名，否則報錯undefined
    console.log(animalBird); //bird
}
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 微信小程序~自定義屬性設置和獲取（data-）微信小程序——data-*自定義屬性關於H5的自定義屬性data-* 自定義屬性 —— data-* HTML5自定義屬性之data- HTML5自定義屬性之data- HTML5 data-* 自定義屬性獲取自定義屬性、 data-* 的值微信小程序自定義屬性設置和獲取微信小程序獲取自定義屬性值