<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute与Property的区别</title>
</head>
<body>
复选框<input type="checkbox" id="testCheckBox"/>
</body>
</html>
<script>
var oCheckbox=document.getElementById("testCheckBox");
// 设置Attribute
oCheckbox.setAttribute("value","boxValue");
console.log(oCheckbox.value);//boxValue
// 设置Property
oCheckbox.name="boxName";
console.log(oCheckbox.getAttribute("name"));//boxName
// 自定义Attribute
oCheckbox.setAttribute("myValue","myBoxValue");
console.log(oCheckbox.myValue);//undefined
// 自定义Property
oCheckbox.myName="myBoxName";
console.log(oCheckbox.getAttribute("myName"));//null
// 设置Property(number类型)
oCheckbox.num=1;
console.log(typeof(oCheckbox.num));//number
// 设置Property(boolean类型)
oCheckbox.isPost=true;
console.log(typeof(oCheckbox.isPost));//boolean
// attribute支持类型
oCheckbox.setAttribute("attrValue",1);
console.log(typeof(oCheckbox.getAttribute("attrValue")));//string
oCheckbox.setAttribute("isChecked",true);
console.log(typeof(oCheckbox.getAttribute("isChecked")));//string </script>
