用javascript(js)实体化盒子（设置盒子样式）

最新推荐文章于 2024-08-17 23:10:04 发布

qq_41485882

最新推荐文章于 2024-08-17 23:10:04 发布

阅读量3.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_41485882/article/details/81608622

版权

1、我们先写两个div的盒子，一个用css控制box01盒子的样式，用javascript(js)控制box02的盒子的样式。

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
    /* 用css控制box01盒子一的样式 */
        #box01 {width:100px;height : 100px;background : pink; }
</style>
</head>
<body>
    <div id="box01">盒子一</div>
    <div id="box02">盒子二</div>
</body>
</html>
<script type="text/javascript">
/*用js控制盒子二的样式*/
 /*用document.getElementById('box02')获得指定盒子的id,document是文档属性，
  document.getElementById('box02').style.width = '200px';
  是设置盒子的属性在等号的右边的单引号设置对应的属性值
  */
    document.getElementById('box02').style.width = '200px';
    document.getElementById('box02').style.height = '200px';
    document.getElementById('box02').style.background = 'blue';
</script>