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

  • 相关阅读:
    Tomcat架构解析(五)-----Tomcat的类加载机制
    session与cookie
    freemarker常用标签解释遍历
    freemarker常用标签解释三
    freemarker常用标签解释二
    freemarker常用标签解释
    禁止浏览器自动填充
    使用cookie实现自动登录
    长连接和短连接
    filter防止xxs攻击
  • 原文地址:https://www.cnblogs.com/fhuafeng/p/1768286.html
Copyright © 2011-2022 走看看