JS小练习-1

最新推荐文章于 2022-02-21 08:45:19 发布

喵无敌

最新推荐文章于 2022-02-21 08:45:19 发布

阅读量368

点赞数

CC 4.0 BY-SA版权

分类专栏： JS小练习

本文链接：https://blog.csdn.net/virinko/article/details/79583504

JS小练习专栏收录该内容

0 篇文章

订阅专栏

本文通过实例演示如何使用JavaScript操作DOM元素的样式，包括改变高度、宽度、背景颜色及显示状态，并提供了一种重置样式的简便方法。

题外话先行

说真的，CSDN用表情包还得让我同过本地文件上传，我非常不高兴

但是我没有办法，那我妥协吧

介于我感觉我快忘了JS是什么玩意儿了，于是乎开始找JS的demo练手，然后我就新奇的发现了一个很好的demo系列

正题：

任务：用按钮控制DIV的样式

先附上我寄几个儿写的丑陋代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制div</title>
</head>
<style>
    #btn{
        text-align: center;
        width: 500px;
        margin: auto;
        padding: 0;
    }
    #box{
        width: 100px;
        height: 100px;
        background-color: #CC6600;
        margin: 20px auto;
    }
</style>
<script>
    function a() {
        document.getElementById("box").style.height="200px";
    }
    function b() {
        document.getElementById("box").style.width="200px";
    }
    function c() {
        document.getElementById("box").style.backgroundColor="black";
    }
    function d() {
        document.getElementById("box").style.display="none";
    }
    function e() {
        document.getElementById("box").removeAttribute("style");
    }
</script>
<body>
<div id="btn">
    <input type="button" value="变高" οnclick="a()">
    <input type="button" value="变宽" οnclick="b()">
    <input type="button" value="变色" οnclick="c()">
    <input type="button" value="隐藏" οnclick="d()">
    <input type="button" value="重置" οnclick="e()">
    <div id="box"></div>

</div>

</body>
</html>

肥肠愚蠢的实现了功能，很惭愧，但是还是要帖出来，毕竟我jio得我这个肥肠好理解

为什么用abcd命名函数？当然是因为懒啊

关于重置按钮我要说一句，上面这个方法也是我看原作者其他的demo例子找到的

实际上据说这两种方法都行：

document.getElementById("box").removeAttribute("style");
document.getElementById("box").setAttribute('style','');

好，接下来我们看瞅瞅原作者的代码：

看看人家对JS的运用，肥肠炫酷吊炸天是不是，相比之下，我的代码瞬间就是一坨屎了

呵，程序员.jpg

现在你们肯定觉得原作者的代码看不懂是不是？

尤其那句：

this.index==oBtn.length-1&&(oDiv.style.cssText="");

O**K，不要慌，我来给你解释一哈子：

这玩意儿的意思就是判断最后一个重置按钮

当this.index等于4的时候，就会执行括号中的代码，为什么是4？当然是从0开始计数，但是length这个属性显示的长度啊，长度是5。

它的效果等同于：

if(this.index==oBtn.length-1){
    oDiv.style.cssText="";
}

是不是又想问style.cssText=""是啥意思，不要慌，我还会给你解释的

cssText建议先去了解一下，它就是设置标签样式的，而这句就是把样式初始化了

我在搜索资料的过程中，原作者代码中涉及“闭包”，这个概念希望去了解下

现在我把另一位博客作者的代码给大家看一下，他写的很仔细，注释也很详细：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lesson1-index1控制div属性</title>
    <style>
        #outer{
            width: 500px;
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        #div1{
            width:  100px;
            height: 100px;
            background-color: #010101;
            margin: 10px auto;
            display: block;
        }
    </style>
    <script>
        var changeStyle=function(elem,attr,value){
            elem.style[attr]=value;
            //元素elem的属性attr的样式style的取值为value
        };

        window.onload= function () {
            //定义oBtn，通过input标签名查找元素
            var oBtn=document.getElementsByTagName("input");
            //定义oDiv，通过id为div1查找元素
            var oDiv=document.getElementById("div1");
            //定义oAtt，属性格式如下，定义oVal，对应属性的取值（对应于变宽、变高、改变颜色、隐藏、重置）
            var oAtt=["width","height","background-color","display","display"];
            var oVal=["200px","200px","red","none","block"];

            for(var i=0;i<oBtn.length;i++){
                //optionObject.index,index 属性可返回下拉列表中选项的索引位置。
                oBtn[i].index=i;
                oBtn[i].onclick= function () {
                    //这里的this代表当前的btn，当this.index等于4时，后面的oDiv.style.cssText = ""这句会执行
                    //cssText 的本质就是设置 HTML 元素的 style 属性值,此句相当于初始化oDiv.style
                    if(this.index==oBtn.length-1){
                        oDiv.style.cssText="";
                    }
                    //this.index==oBtn.length-1&&(oDiv.style.cssText="");
                    //改变样式，oDiv的属性oAtt[this.index]样式改为oVal[this.index]
                    changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
                }

            }
        };
    </script>
</head>
<body>
    <div id="outer">
        <input type="button" value="变宽"/>
        <input type="button" value="变高"/>
        <input type="button" value="变色"/>
        <input type="button" value="隐藏"/>
        <input type="button" value="重置"/>
    </div>
    <div id="div1"></div>

</body>
</html>