标签支持的可以直接操作的属性
每种标签都支持的可以直接操作的属性
id id属性
className class属性
title title属性
操作语法
设定
标签对象.id = 属性值
标签对象.className = 属性值
标签对象.title = 属性值
获取
var 变量 = 标签对象.id ;
var 变量 = 标签对象.className ;
var 变量 = 标签对象.title ;
<body>
<div class="box"></div>
<script>
const oDiv = document.querySelector("div");
oDiv.id = "BOX";
var cla = oDiv.className;
console.log(cla);
</script>
</body>
运行代码:
标签支持的布尔属性
默认选中 多选 只读 禁用 ....
设定
标签对象.布尔属性 = 属性值
获取
var 变量 = 标签对象.属性属性
布尔属性操作的结果 不管是设定还是获取 一定是 布尔数值( true / false )
执行 是 true
不支持 是 false
标签属性的通用操作方法 布尔属性除外
所有标签的所有属性 都可以使用的通用的操作方法
布尔属性除外
设定
标签对象.setAttribute( '属性' , 属性值 );
获取
var 变量 = 标签对象.getAttribute( '属性' );
删除
标签对象.removeAttribute( '属性' );
<body>
<div class="box" id = "box"></div>
<script>
// 获取标签对象
const oDiv = document.querySelector("div");
// 设定
oDiv.setAttribute('name',456);
// 获取
var cla = oDiv.getAttribute('class')
console.log(cla);
// 删除
oDiv.removeAttribute('id');
</script>
</body>
运行结果: