zoukankan      html  css  js  c++  java
  • 控制div属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>控制div属性</title>
    <style>
    #outer{500px;margin:0 auto;padding:0;text-align:center;}
    #div1{100px;height:100px;background:black;margin:10px auto;display:block;}
    </style>
    <script>
    var changeStyle = function (elem, attr, value)
    {
        elem.style[attr] = value
    };
    window.onload = function ()
    {
        var oBtn = document.getElementsByTagName("input");
        var oDiv = document.getElementById("div1");
        var oAtt = ["width","height","background","display","display"];
        var oVal = ["200px","200px","red","none","block"];
    
        for (var i = 0; i < oBtn.length; i++)
        {
            oBtn[i].index = i;
            oBtn[i].onclick = function ()
            {
                this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
                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 id="div1"></div>
    </div>
    </body>
    </html>
  • 相关阅读:
    promise实现(未实现微任务)
    fastclick猜的原理
    js进制
    如何造一个好的组件库【有空就更新】
    BEM的命名
    unicode、utf-32、utf-8、utf-16
    getElementsByTagName、getElementsByClassName与querySelectorAll的区别
    为什么vue中没有事件委托/事件代理的概念
    vscode注释param
    复制dom
  • 原文地址:https://www.cnblogs.com/mayufo/p/4474919.html
Copyright © 2011-2022 走看看