JS operational attributes
1. Set, get, removed
setAttribute() getAttribute() removeAttribute()
<body>
<input type="text" class="input" value="test" data-value="1111">
<button class="btn" >btn1</button>
<button class="btn">btn2</button>
<button class="btn">btn3</button>
</body>
<script>
var dom = document.getElementsByClassName('input')[0];
var btns = document.getElementsByClassName('btn');
// hasAttribute() 判断对象是否有某属性，返回一个 Boolean 值。
console.log(dom.hasAttribute('data-value')); // true
console.log(dom.hasAttribute('placeholder')); // false
btns[0].onclick = function() {
// Get property value
var text = dom.getAttribute ( 'value' );
var className = dom.getAttribute ( 'class' );
var ID = dom.getAttribute ( 'ID'); // Get no property returns null
/ / set / modify attributes
dom.setAttribute ( 'value', className + text + ID);
dom.setAttribute ( 'Disabled', 'Disabled' );
the this .setAttribute ( 'Disabled', 'Disabled' );
}
btns [ . 1] = .onclick function () {
// remove attributes
dom.removeAttribute ( 'Disabled' );
btns[0].removeAttribute('disabled');
}
</script>
