fgm实例练习笔记-1.1控制Div属性

最新推荐文章于 2021-12-15 15:05:54 发布

xiyuanhuhu

最新推荐文章于 2021-12-15 15:05:54 发布

阅读量256

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xiyuanhuhu/article/details/74757254

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

页面布局上，五个按钮用input写，和要改变的div共同嵌在一个父级div里。
script部分：


var changeStyle = function (elem, attr, value)
{
    elem.style[attr] = value
};//函数写在了外部，三个参数分别是对象，对象style属性的其中一项（用方括号按属性名查询数组内的项），值

window.onload = function () //加载时完成调用
{
    var oBtn = document.getElementsByTagName("input"); //oBtn获取了按钮
    var oDiv = document.getElementById("div1"); //oDiv获取了要改变的那个div
    var oAtt = ["width","height","background","display","display"]; //oAtt是一个数组，包含了style下的各个属性
    var oVal = ["200px","200px","red","none","block"]; //oVal是一个数组，包含各个属性的值

    for (var i = 0; i < oBtn.length; i++) //for循环，遍历了每一个按钮（一共五个），i要小于oBtn的长度length即按钮数量
    {
        oBtn[i].index = i;
        oBtn[i].onclick = function () //onclick是在按钮身上的
        {
            this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); //&&逻辑与，如果前者为true则运行后者。即当循环到了最后一项（重置div按钮），就让div的css重写（cssText）成空""，达到重置效果。（虽然div标签内的style成了"",但是<head>中还有初始化的<style>所以div还原了）
            changeStyle(oDiv, oAtt[this.index], oVal[this.index]) //调用外部函数，将div对象，oAtt属性和oVal值传递，数组采用当前this.index
        }   
    }
};
//在onload阶段用for循环让五个按钮获得了各自的onclick。两个数组 属性和值一一对应。

xiyuanhuhu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
fgm实例练习笔记-1.1控制Div属性

页面布局上，五个按钮用input写，和要改变的div共同嵌在一个父级div里。 script部分：var changeStyle = function (elem, attr, value){ elem.style[attr] = value};//函数写在了外部，三个参数分别是对象，对象style属性的其中一项（用方括号按属性名查询数组内的项），值window.onload = f
复制链接

扫一扫

专栏目录