<div id="container" >
<a href="http://www.hm-3223.net/" target="_blank">
<img src="images/pic/logo1.gif" width="135" height="40" border="1"></a> <a href="http://www.art-athome.com"
target="_blank">
<img src="images/pic/logo6.gif" width="135" height="40" border="1"></a>
<a href="http://www.cn-gd.net/" target="_blank">
<img src="images/pic/logo3.gif" width="135" height="40" border="1"></a> <a href="http://www.328f.cn/">
<img src="images/pic/logo4.gif" width="135" height="40" border="1"></a>
<a href="http://www.70jj.com/" target="_blank">
<img src="images/pic/logo5.gif" width="135" height="40" border="1"></a> <a href="http://www.cfhot.com/"
target="_blank">
<img src="images/pic/logo2.gif" width="135" height="40" border="1"></a>
<a href="http://www.soogu.com/" target="_blank">
<img src="images/pic/logo7.gif" width="135" height="40" border="1"></a>
</div>这一段求 offsetWidth移到Body
中用alert(offsetWidth) 998px ,真的是好意头移动到
<body><table> <table> .....<td>
<div id="container" >
<a href="http://www.hm-3223.net/" target="_blank">
<img src="images/pic/logo1.gif" width="135" height="40" border="1"></a> <a href="http://www.art-athome.com"
target="_blank">
<img src="images/pic/logo6.gif" width="135" height="40" border="1"></a>
<a href="http://www.cn-gd.net/" target="_blank">
<img src="images/pic/logo3.gif" width="135" height="40" border="1"></a> <a href="http://www.328f.cn/">
<img src="images/pic/logo4.gif" width="135" height="40" border="1"></a>
<a href="http://www.70jj.com/" target="_blank">
<img src="images/pic/logo5.gif" width="135" height="40" border="1"></a> <a href="http://www.cfhot.com/"
target="_blank">
<img src="images/pic/logo2.gif" width="135" height="40" border="1"></a>
<a href="http://www.soogu.com/" target="_blank">
<img src="images/pic/logo7.gif" width="135" height="40" border="1"></a>
</div></td>....</table></table></body>中居然是 0
有没有搞错?
我还想去scrollLeft ++ 呢,这怎么动呀
<a href="http://www.hm-3223.net/" target="_blank">
<img src="images/pic/logo1.gif" width="135" height="40" border="1"></a> <a href="http://www.art-athome.com"
target="_blank">
<img src="images/pic/logo6.gif" width="135" height="40" border="1"></a>
<a href="http://www.cn-gd.net/" target="_blank">
<img src="images/pic/logo3.gif" width="135" height="40" border="1"></a> <a href="http://www.328f.cn/">
<img src="images/pic/logo4.gif" width="135" height="40" border="1"></a>
<a href="http://www.70jj.com/" target="_blank">
<img src="images/pic/logo5.gif" width="135" height="40" border="1"></a> <a href="http://www.cfhot.com/"
target="_blank">
<img src="images/pic/logo2.gif" width="135" height="40" border="1"></a>
<a href="http://www.soogu.com/" target="_blank">
<img src="images/pic/logo7.gif" width="135" height="40" border="1"></a>
</div>这一段求 offsetWidth移到Body
中用alert(offsetWidth) 998px ,真的是好意头移动到
<body><table> <table> .....<td>
<div id="container" >
<a href="http://www.hm-3223.net/" target="_blank">
<img src="images/pic/logo1.gif" width="135" height="40" border="1"></a> <a href="http://www.art-athome.com"
target="_blank">
<img src="images/pic/logo6.gif" width="135" height="40" border="1"></a>
<a href="http://www.cn-gd.net/" target="_blank">
<img src="images/pic/logo3.gif" width="135" height="40" border="1"></a> <a href="http://www.328f.cn/">
<img src="images/pic/logo4.gif" width="135" height="40" border="1"></a>
<a href="http://www.70jj.com/" target="_blank">
<img src="images/pic/logo5.gif" width="135" height="40" border="1"></a> <a href="http://www.cfhot.com/"
target="_blank">
<img src="images/pic/logo2.gif" width="135" height="40" border="1"></a>
<a href="http://www.soogu.com/" target="_blank">
<img src="images/pic/logo7.gif" width="135" height="40" border="1"></a>
</div></td>....</table></table></body>中居然是 0
有没有搞错?
我还想去scrollLeft ++ 呢,这怎么动呀
最好是您确认一下,这个工程量很大呢,大小小的table,img一大堆呢
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
var el = document.getElementById(elementId);
if(el.parentNode === null || el.style.display == 'none'){ return false; }
var parent = null;
var pos = []; //不定长数组?
var box;
if(el.getBoundingClientRect){ //IE
box = el.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
return {x:box.left + scrollLeft, y:box.top + scrollTop};
}else if(document.getBoxObjectFor){ // gecko
box = document.getBoxObjectFor(el);
var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
pos = [box.x - borderLeft, box.y - borderTop];
}else{ // safari & opera
pos = [el.offsetLeft, el.offsetTop];
parent = el.offsetParent;
if (parent != el) {
while (parent) {
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent = parent.offsetParent;
}
}
if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )){
pos[0] -= document.body.offsetLeft;
pos[1] -= document.body.offsetTop;
}
}
if (el.parentNode) {
parent = el.parentNode;
} else {
parent = null;
}
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
pos[0] -= parent.scrollLeft;
pos[1] -= parent.scrollTop;
if (parent.parentNode) {
parent = parent.parentNode;
} else {
parent = null;
}
}
return {x:pos[0], y:pos[1]};
} //-->
</script>
1. offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
很清楚.对于一个div来说如上的id container
我们使用
container.width
从字面上理解,得到的是它的宽度.如果样式指定了,一般到得的是样式的宽度,事实上,样式都是或大或小,很少有刚刚好的.
100%
事实上,这个div的实际宽度我们无法得知
那么引入了
container.offsetWidth,
它由大家看到的宽度+一部分大家没看到的宽度组成。
但是很见鬼,非常之见鬼,我想不通的见鬼,不知是不是脚本技术的局限性造成的
看下面一段代码 <div id=demoRight style="overflow:hidden;height:77;width:600;background:#000000;color:#ffffff;border:5px none #000000;">
<table align=left cellpadding=0 cellspacing=0 border=0>
<tr>
<td id=demoRight1 valign=top><img src="1-1.jpg" width="102" height="77" border="0" /><img src="2-1.jpg" width="102" height="77" border="0" /><img src="3-1.jpg" width="102" height="77"border="0" /><img src="4-1.jpg" width="102" height="77"border="0" /><img src="5-1.jpg" width="102" height="77"border="0" /><img src="6-1.jpg" width="102" height="77"border="0" /><img src="7-1.jpg" width="102" height="77"border="0" /><img src="8-1.jpg" width="102" height="77" border="0" /></td>
<td id=demoRight2 valign=top></td>
</tr>
</table>
</div>
<div id="Div1"></div>
<script type="text/javascript">
var speed_Right = 30
demoRight2.innerHTML = demoRight1.innerHTML
demoRight.scrollLeft = demoRight1.offsetWidth
alert(demoRight2.offsetWidth); //这里取得的 demoRight2.offsetWidth =0 function Marquee_Right() {
var tmp1 = demoRight.scrollLeft
var tmp2 = demoRight1.offsetWidth
if (demoRight.scrollLeft <= 0)
demoRight.scrollLeft += demoRight1.offsetWidth
else {
demoRight.scrollLeft--
}
var tmp3 = demoRight.scrollLeft
var tmp4 = demoRight1.offsetWidth //而这里是 818
Div1.innerHTML = "begin : scrollleft" + tmp1 + " td1.offsetwidth " + tmp2 + "end : scrollleft" + tmp3 + " td1.offsetwidth " + tmp4;
} var MyMar_Right = setInterval(Marquee_Right, speed_Right)
demoRight.onmouseover = function() { clearInterval(MyMar_Right) }
demoRight.onmouseout = function() { MyMar_Right = setInterval(Marquee_Right, speed_Right) } </script>
为什么alert取得是 0?
alert(demoRight1.offsetWidth); //这里取得的 demoRight1.offsetWidth =0这东西搞得很烦心,请大家谅解
看你的aa的状况,如果是图片或者未加载的元素,就取不到对象的offsetWidth和offsetHeight。
看来还真是脚本技术的局限性
要是没加载完你给个exception或是runtime error不就完了