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

来源：互联网发布：hash-256函数算法原理编辑：程序博客网时间：2024/06/03 10:09

页面布局上，五个按钮用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。两个数组 属性和值一一对应。

阅读全文

0 0