iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
0

重新釐清了一下 HTML 屬性與 JS 的關係,如何去叫用 HTML 裡面的屬性。我們可以把每個 HTML tag 想像成是一個物件,擁有自己的屬性,並且以 element.propertyName 的方式叫用。
以下例子,去判斷屬性名稱為特定姓名的話,將 placeholder 裡面的值修改。

HTML code:

<input type="json" name="Jason" placeholder="一">
<input type="json" name="John" placeholder="二">
<input type="json" name="Peter" placeholder="三">
<input type="json" name="Jim" placeholder="四">
<input type="json" name="Amy" placeholder="五">
<button class="changePlaceholder">Action</button>

JS code:

document.getElementsByClassName("changePlaceholder")[0].addEventListener('click',function(){
  document.querySelectorAll("INPUT").forEach(function(node){
    if (node.name == 'Jim') {
      node.placeholder = 'Jim'
    }
  })
})

但是在 HTML 裡面他不是一個真實的物件,不是你自己加上名稱就會擁有的,所以當我們要自訂屬性的時候,必須符合它的規則。把資料屬性在 HTML tag 裡寫成 data-propertyName,並在 JS 中用 element.dataset.propertyName 取值

說明:
自訂一個屬性,當按下按鈕,秀出屬性內容

HTML code

<h1 data-hint="insert Data" name="Jason">My Data</h1>
<button class="showData">Action</button>

JS code

document.getElementsByClassName("showData")[0].addEventListener('click',function(){
  var myData = document.getElementsByTagName("H1")[0].dataset
  alert(myData.hint)
})

上一篇
一個 JS 學習者的日常 day23
下一篇
一個 JS 學習者的日常 day 25
系列文
一個 JS 學習者的日常30

尚未有邦友留言

立即登入留言