css、js控制html标签的属性和内容

最新推荐文章于 2024-05-12 10:57:12 发布

微电子学与固体电子学-俞驰

最新推荐文章于 2024-05-12 10:57:12 发布

阅读量757

点赞数

分类专栏：前端技能

前端技能专栏收录该内容

69 篇文章 0 订阅

订阅专栏

css.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>

这里写图片描述

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>

这里写图片描述