<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" class="demo" hsy="red" style="background: pink">heslay</div>
<script type="text/javascript">
//获取值
//获取元素
var id1=document.getElementById('app');
//获取系统属性值
// 点语法或者getAttribute方法都可以
document.write(id1.className);
document.write(id1.getAttribute('class'));
//获取自定义属性值
//点语法失败显示undefined
document.write(id1.hsy);//显示undefined
//getAttribute成功
document.write(id1.getAttribute('hsy'));//red
</script>
<script type="text/javascript">
//修改值
//元素
var id1=document.getElementById('app');
//修改系统属性值
// 点语法需要驼峰式命令才可以
//并且是在原有基础上添加属性
id1.className='ickt';
document.write(id1.className);
//如font-size需要变成fontSize
id1.style.fontSize='100px';
id1.setAttribute('class','kk');
document.write(id1.getAttribute('class'));
//setAttribute会覆盖原有的属性
id1.setAttribute('style','font-size: 100px');
//修改自定义属性值
//点语法成功
id1.hsy="green";
document.write(id1.hsy);
//setAttribute成功
id1.setAttribute('hsy','yellow');
document.write(id1.getAttribute('hsy'));
</script>
<script type="text/javascript">
//添加属性
//点语法设置失败
id1.color='green';
//setAttribute成功
id1.setAttribute('color','green');
</script>
</body>
</html>
<Dom属性操作>
最新推荐文章于 2024-05-01 14:49:36 发布