返回JavaScr......登陆

JavaScript控制div样式

阿涛2019-06-29 13:24:20110

课程中案例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript控制div样式</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #bb60d5;
            margin-bottom: 30px;

        }
    </style>
</head>
<body>
<div id="box"></div>
<input type="button" value="变高" onclick="aa()">
<input type="button" value="变宽" onclick="bb()">
<input type="button" value="变色" onclick="cc()">
<input type="button" value="重置" onclick="dd()">
<input type="button" value="隐藏" onclick="ee()">
<input type="button" value="显示" onclick="ff()">

<script>
   var box ;

   window.onload = function (){
        box = document.getElementById('box');
    }

   function aa() {
       box.style.height = "300px";
   }

   function bb() {
       box.style.width = "300px";
   }

   function cc() {
       box.style.backgroundColor = "red";
   }

   function dd() {
       box.style.width = "100px";
       box.style.height = "100px";
       box.style.backgroundColor = "#bb60d5";
       box.style.display = 'block';
   }

   function ee() {
       box.style.display = 'none';

   }

   function ff() {
       box.style.display = 'block';

   }
</script>
</body>
</html>

运行截图:

QQ截图20190629131909.png

QQ截图20190629131946.png

总结:

document.getElementById()返回的是页面元素。

document.getElementsByClassName()返回的是页面元素的数组,访问其内容需要下标。

实际操作中遇到的一个小问题,搞了半天终于搞懂。


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网