【玛卜码】用javascript(js）控制html标签的属性和内容

551 05-10

js控制html标签属性和内容
通过点语法可以访问和设置除了class以外的所有标签属性，这里想设置class属性的话，要使用className来设置，如果想要设置标签中间的内容，那么可以使用innerHTML
1.先写一个用css设置div的样式

<!DOCTYPE html>
<html>
<head>
    <title>js控制html标签的属性和内容</title>
    <style type="text/css">
        #box01{width: 100px;height: 100px;background:pink;}
    </style>
</head>
<body>
    <div id="box01" title="我是title属性" class="class01">我是一个div盒子</div>

</body>
</html>

2.用js改变原有的html属性

!DOCTYPE html>
<html>
<head>
    <title>js控制html标签的属性和内容</title>
    <style type="text/css">
        #box01{width: 100px;height: 100px;background:pink;}
    </style>
</head>
<body>
    <div id="box01" title="我是title属性" class="class01">我是一个div盒子</div>

</body>
</html>
<script type="text/javascript">
    //1.先获得指定的id属性
    var box01 = document.getElementById('box01');
    //2.改变div中的title属性
    box01.title = '我是被js改变的title';
    //2.改变class的属性
    box01.className = 'class02';
    //3.改变div显示的内容
    box01.innerHTML = '我是被js修改的html属性'
</script>

标签： JavaScript