zoukankan      html  css  js  c++  java
  • Javascript操作div及其内含对象示例

    设置div的绝对位置和是否显示代码:

    <html>

    <head>

    <script type="text/javascript">

        function showDiv(obj) {

            // 保存元素

            var el = obj;

            // 获得元素的左偏移量

            var left = obj.offsetLeft;

            // 获得元素的顶端偏移量

            var top = obj.offsetTop;

           

            // 循环获得元素的父级控件,累加左和顶端偏移量

            while (obj = obj.offsetParent) {

                left += obj.offsetLeft;

                top += obj.offsetTop;

            }

           

            // 设置层的坐标并显示

            document.all.divShow.style.pixelLeft = left;

           

            // 层的顶端距离为元素的顶端距离加上元素的高

            document.getElementById("divShow").style.pixelTop = top + el.offsetHeight;

            document.getElementById("divShow").style.display = "block";

        }

       

        function hideDiv() {

            document.getElementById("divShow").style.display="none";

           

        }

    </script>

    <style>

        #divShow

        {

            width:150px;

            height:180px;

            border-width:thin;

            background:yellow;

        }

    </style>

    </head>

    <body>

    <input id="txtTest" type="text" onfocus ="javascript:showDiv(this);"  />

    <div id="divShow" style="display:none;position:absolute;">显示的内容</div>

    </body>

    </html>

     

     

    操作div内的对象代码,代码如下:

     

    <div id="div1">

    <input type="checkbox" onclick="selectCheckBoxes('div1', this.checked)" />全选<br/>

    <input type="checkbox" /><br/>

    <input type="checkbox" /><br/>

    <input type="checkbox" /><br/>

    </div>

    <br/>

    <div id="div2">

    <input type="checkbox" onclick="selectCheckBoxes('div2', this.checked)" />全选<br/>

    <input type="checkbox" /><br/>

    <input type="checkbox" /><br/>

    <input type="checkbox" /><br/>

    </div>

     

    <!--js代码片段如下: -->

     

    复制代码 代码如下:

    <script type="text/javascript">

    function selectCheckBoxes(domId,value)

    {

    var inputs = document.getElementById(domId).getElementsByTagName("input");

    for(var i = 0; i < inputs.length; i++)

    {

    if (inputs[i].type == 'checkbox')

    {

    inputs[i].checked=value;

    }

    }

    }

    </script>

     

    详细出处参考:http://www.jb51.net/article/21166.htm

  • 相关阅读:
    NoClassDefFoundError问题
    Spring-Batch处理MySQL数据后存到CSV文件
    jQuery EasyUI + struts2.3 + mongoDB 列表查询翻页JAVA样例
    mongodb exception in initAndListen: 12596 old lock file, terminating 解决方法
    硬盘安装RedHat Enterprise Linux 6(转载)
    jQuery zxxbox弹出框插件(v3.0)
    在html页面中利用ftp访问协议格式载入服务器图片
    eclipse中 com.sun.image.codec.jpeg.JPEGCodec 无法编译通过问题
    java 去掉字符串右侧空格
    去掉eclipse js 错误提示
  • 原文地址:https://www.cnblogs.com/fhuafeng/p/1768286.html
Copyright © 2011-2022 走看看