正文
DOM标签属性和对象属性
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
DOM元素的属性分为两种
(1)标签属性直接写在标签上的属性
(2)对象属性由于所有的DOM元素都是Object类型,所以我们可以通过对象的方式为DOM元素设置属性
1.标签属性
(1)设置标签属性
elem.setAttribute(属性名,属性值);
<div></div>
<script>
var div=document.querySelector("div");
div.setAttribute("abc","123"); //为div添加属性 属性名abc 属性值为123
console.log(div); //打印结果: <div abc="123"></div>
</script>
注意:
(1)属性名单词之间通常用" - "连接, 并且不使用驼峰式 例如 div-one
(2)属性值必须为小写字符串
(3)可以通过标签属性获取元素 例如: document.querySelector("[abc='123']");
(2)获取标签属性值,并返回
elem.getAttribute(属性名);
var str=div.getAttribute("abc");
console.log(str); //打印结果: 123
(3)删除标签属性
elem.removeAttribute(属性名);
div.removeAttribute("abc");
console.log(div); //打印结果: <div></div>
(4)标签的单属性属性值和属性名相同
示例:
<input type="checkbox">
<script>
var input=document.querySelector("input"); //获取input
input.setAttribute("checked","");//写法1
input.setAttribute("checked","checked");//写法2</script>
//写法1 和写法2 都会使复选框被选中
1.对象属性
(1)设置对象属性 使用点语法
elem.属性名=属性值;
获取对象属性值:
elem.属性名
var div = document.querySelector("div"); //获取div1
div.abc="123"; //为div添加abc属性 属性值为 123
console.log(div); //打印div
console.log(div.abc); //获取并打印div的 abc属性值
这时我们发现对象属性并不会显示在标签上
(2)对象属性优先级高于标签属性
<input type="checkbox">DOM属性
<script>
var input=document.querySelector("input"); //获取input
input.checked=false; //设置对象属性
input.setAttribute("checked",""); //设置标签属性
</script>
(3)标签属性 与 对应的对象属性
(a) checked id title 等 标签属性有对应的对象属性 自定义属性没有
(b)class较为特殊,对应的对象属性为 className
input.className="check1";
console.log(input); //打印结果: <input type="checkbox" class="check1">
(4)style属性
- 每个元素都有style属性
- 可以通过字符串添加修改行内样式
- 可用设置队形属性设置方式,添加修改行内样式
- 通常用对象的写法
示例: 创建标签并设置样式
function ce(type, style) {
var elem = document.createElement(type);
// ES6的方法 将后面的对象中的属性复制到前面对象中
Object.assign(elem.style, style);
return elem;
}
console.log(typeof (div));//用法: ce(标签名,样式)var div = ce("div", {
width: "30px",
height: "30px",
border: "1px solid",
backgroundColor: "red"
});
document.body.appendChild(div); //将创建好的元素添加至body
