Js/Jquery 设置获取属性
<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()。
