标签属性操作
1.对背景颜色的操作
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var d=document.getElementsByTagName("div");
d[0].style.backgroundColor="red";
</script>
2.对元素宽度的设置
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* width: 100px; */
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var d=document.getElementsByTagName("div");
d[0].style.backgroundColor=`pink`;
d[0].style.width=50+'px';
</script>
3.对元素高度的设置
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var d=document.getElementsByTagName("div");
d[0].style.backgroundColor=`pink`;
d[0].style.height=50+'px';
</script>
4. 对元素修改内容
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var d=document.getElementsByTagName("div");
d[0].style.backgroundColor=`pink`;
d[0].style.height=50+'px';
d[0].innerHTML=`我是div`;
</script>
5.修改和获取id属性值
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
<script>
var d=document.getElementsByTagName("div");
d[0].style.backgroundColor=`pink`;
d[0].style.height=50+'px';
d[0].innerHTML=`我是div`;
d[0].id=`d2`;
</script>
6.添加class属性名
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
<script>
var d=document.getElementsByTagName("div");
d[0].style.backgroundColor=`pink`;
d[0].style.height=50+'px';
d[0].innerHTML=`我是div`;
d[0].id=`d2`;
d[0].className='d3';
</script>