JSHTML标签的⾃定义属性的设置与获取
设置⾃定义属性:setAttribute("属性的名字","属性的值");
获取⾃定义属性的值:getAttribute("属性的名字");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style-type: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="uu">
<li>数学成绩</li>
<li>英语成绩</li>
<li>语⽂成绩</li>
<li>政治成绩</li>
<li>历史成绩</li>
</ul>
<script src="common.js"></script>
<script>
//总结:设置⾃定义属性:setAttribute("属性的名字","属性的值");
//获取⾃定义属性的值:getAttribute("属性的名字")
//获取所有的li标签,然后为每个标签中动态的添加⾃定义属性和值
//点击的时候获取该标签的⾃定义属性的值
//根据id获取ul标签,并且或者该标签中所有的li
var list=my$("uu").getElementsByTagName("li");
//循环遍历
for(var i=0;i<list.length;i++){
/
/先为每个li添加⾃定义属性
html ul标签//list[i].score=(i+1)*10;//此⽅式,⾃定义属性在DOM对象上,不在标签中
list[i].setAttribute("score",(i+1)*10);
//点击每个li标签,显⽰对应的⾃定义属性值
list[i].onclick=function(){
Attribute("score"));
};
}
</script>
</body>
</html>
common.js
/**
* 根据id属性的值,返回对应的标签元素 * @param id id属性的值,string类型的 * @returns {Element} 元素对象
*/
function my$(id) {
ElementById(id); }
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论