下面我们继续学一些关于属性的操作
一、置属性
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
</body>
<script>
var span1=document.getElementById('span1');
span1.setAttribute('name','span1');
</script>
</html>
以上我们使用setAttribute命令给id为span1的span标签添加了一个name属性，为指定属性值为span1。
二、置内容
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
</body>
<script>
var span1=document.getElementById('span1');
span1.innerHTML='这是innderHTML置入的内容';
</script>
</html>
以上我们通过innderHTML命令给id为span1的span标签置入了内容，执行结果如下
三、追加属性
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
</body>
<script>
var span1=document.getElementById('span1');
span1.className='cx';
span1.className +=' cx1';
</script>
</html>
以上我们先获取到了id为span1的元素，然后给该元素置了一个class=cx的属性，然后又通过+=的方式给该元素的class属性追加了一个cx1的属性值。
执行结果如下：
以上就是关于置属性、置内容和追加属性的讲解，请大家自己动手尝试操作一下其它标签。
|
窥视卡
雷达卡
发表于 2023-1-25 13:00:27
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 06:22:15
