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
