JS技术

Javascript教程:控制DIV属性_Javascript教程

字号+ 作者:H5之家 来源:H5之家 2015-09-15 18:02 我要评论( )

Javascript教程:控制DIV属性,学习Javascript教程:控制DIV属性,Javascript教程:控制DIV属性,查看Javascript教程:控制DIV属性,Javascript教程:控制DIV属性 点击按

Javascript教程:控制DIV属性


    点击按钮改变DIV属性,通过点击不同的按钮设置DIV的样式。
    代码如下:

<script type="text/javascript">
    var oBox = document.getElementById('box');
    var oDiv = document.getElementById('div1');
    var aInput = document.getElementsByTagName('input');
    var aAttr = ['width', 'height', 'backgroundColor', 'display', 'display'];
    var aValue = ['200px', '200px', 'red', 'none', 'block'];
    for(var len=aInput.length,i=0;i<len;i++){
        aInput[i].index = i;  //索引
        aInput[i].onclick = function(){
            //重置按钮,cssText清空DIV属性
            if(this.index == aInput.length - 1)oDiv.style.cssText = "";
            //设置DIV属性
            property(oDiv, aAttr[this.index], aValue[this.index]);
        };
    }
    //控制DIV属性
    function property(obj, attr, value){
        obj.style[attr] = value;
    }
</script>

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript入门教程(二)_javascript教程教程

    JavaScript入门教程(二)_javascript教程教程

    2015-10-10 14:25

  • JavaScript入门教程(五)_javascript教程教程

    JavaScript入门教程(五)_javascript教程教程

    2015-10-10 14:21

  • JavaScript入门教程(四)_javascript教程教程

    JavaScript入门教程(四)_javascript教程教程

    2015-10-10 14:19

  • JavaScript入门教程(三)_javascript教程教程

    JavaScript入门教程(三)_javascript教程教程

    2015-10-10 14:17

网友点评