<body> <div id="tree" data-leaves="47" data-plant-height="2.4m"></div> <script> var tree = document.getElementById("tree"); console.log('---------js attr---------------'); //getAttribute()取值屬性 console.log(tree.getAttribute("data-leaves")); //47 console.log(tree.getAttribute("data-plant-height")); //2.4m //setAttribute()賦值屬性 tree.setAttribute("data-leaves","48"); //data-前綴屬性可以在JS中通過dataset取值，更加方便 console.log(tree.dataset.leaves); // 48 console.log(tree.dataset.plantHeight); //2.4m console.log('---------js data---------------'); //賦值 tree.dataset.leaves--; tree.dataset.plantHeight = "3m"; console.log(tree.dataset.leaves); // 47 console.log(tree.dataset.plantHeight); //3m console.log('-----------jquery 操作-------------'); //新增data屬性 tree.dataset.age = "100"; //刪除，設置成null，或者delete tree.dataset.leaves = null; delete tree.dataset.age; console.log(tree.dataset.leaves); // null console.log(tree.dataset.age); // undefined console.log('-----------jquery data-------------'); //jQuery的data方法 var $tree = $('#tree'); console.log($tree.data("plant-height")); // 3m console.log('-----------jquery attr-------------'); // jquery attr $tree.attr('data-file','file_name'); $tree.attr('disabled',true); console.log($tree.attr('data-file'));// file_name console.log($tree.attr('disabled'),'值類型：',typeof $tree.attr('disabled')); // disabled 值類型： string console.log($tree.attr('checked')); // undefined console.log('-----------jquery prop-------------'); // jquery prop $tree.prop('data-file','file_name'); $tree.prop('disabled',true); console.log($tree.prop('data-file'));// file_name console.log($tree.prop('disabled'),'值類型：',typeof $tree.prop('disabled')); // true '值類型：' 'boolean' console.log($tree.prop('checked')); // undefined </script> </body>
prop()函數的結果:
1.如果有相應的屬性，返回指定屬性值。
2.如果沒有相應的屬性，返回值是空字符串。
attr()函數的結果:
1.如果有相應的屬性，返回指定屬性值。
2.如果沒有相應的屬性，返回值是 undefined。
對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素我們自己自定義的DOM屬性，在處理時，使用 attr 方法。
具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()。