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

原文地址:https://www.cnblogs.com/fhuafeng/p/1768286.html