alert(document.getElementById("a").scrollHeight); // IE6sp1 186 FF2.0 196
找到一个有数滴，哈lz试试看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="[email protected]" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
<!--
.a
{
border: 1px dotted red;
width:190px;
height:95px;
overflow:hidden;
}
.a ul
{
margin:0px;
padding:0px;
list-style:none;
}
.a li
{
display:block;
float:left;
width:95px;
text-align:center
}
//-->
</style>
</head>
<body>
<div id="a" class="a">
<div id="b">
<ul>
<li><img src="green_2003.jpg" width="90" height="75" /><br>图片名称</li>
<li><img src="green_2003.jpg" width="90" height="75" /><br>图片名称</li>
<li><img src="green_2003.jpg" width="90" height="75" /><br>图片名称</li>
<li><img src="green_2003.jpg" width="90" height="75" /><br>图片名称</li>
<ul>
</div>
</div>
<script type="text/javascript">
<!--
alert(document.getElementById("b").offsetHeight); // IE6sp1 186 FF2.0 0
alert(document.getElementById("a").scrollHeight); // IE6sp1 186 FF2.0 196
//-->
</script></body>
</html>
找到一个有数滴，哈lz试试看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="[email protected]" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
<!--
.a
{
border: 1px dotted red;
width:190px;
height:95px;
overflow:hidden;
}
.a ul
{
margin:0px;
padding:0px;
list-style:none;
}
.a li
{
display:block;
float:left;
width:95px;
text-align:center
}
//-->
</style>
</head>
<body>
<div id="a" class="a">
<div id="b">
<ul>
<li><img src="green_2003.jpg" width="90" height="75" /><br>图片名称</li>
<li><img src="green_2003.jpg" width="90" height="75" /><br>图片名称</li>
<li><img src="green_2003.jpg" width="90" height="75" /><br>图片名称</li>
<li><img src="green_2003.jpg" width="90" height="75" /><br>图片名称</li>
<ul>
</div>
</div>
<script type="text/javascript">
<!--
alert(document.getElementById("b").offsetHeight); // IE6sp1 186 FF2.0 0
alert(document.getElementById("a").scrollHeight); // IE6sp1 186 FF2.0 196
//-->
</script></body>
</html>
至于为啥相差10，俺就说不清了FF2.0下a相关height属性scrollHeight : 196
clientHeight : 95
offsetHeight : 97
IE6sp1下a相关height属性scrollHeight : 186
clientHeight : 95
offsetHeight : 97
我是说B的值取不到,不管是scrollHeight还是offsetHeight,因为要做滚动,光A不行to: yixianggao
是的,两种游览器取得值有差别,也不知道为什么,用了float后就没值了
如果去掉图片或用table来替代li,每行N个,这样似乎就正常了(数值如你所说有差别)
但我的项目中要求图和文一起显示
还有没有更好的办法,请大家帮忙测试一下,这问题我弄了几天,还是没有解决办法
我搜索了很多网站,没找到符合这样显示效果的网页,麻烦大家给找一下,非常感谢
我感觉还是用css能解决的,现在问题就出在float上,不用它,排版效果就不行,用了它JS方面值就不对了
但我想了几天也没想出css排版方面其他设计方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template</title>
<style type="text/css">
/* <![CDATA[ *//* ]]> */
</style>
<script type="text/javascript">
/*<![CDATA[*/
if (navigator.appName=="Microsoft Internet Explorer")
{
//最大化窗口
self.moveTo(-5,-5)
self.resizeTo(screen.availWidth +8,screen.availHeight+8)
//这个脚本定义的宽度其实比原窗口还要大那么一点.
}
/*]]*/
</script>
</head>
<body>
<style type="text/css">
<!--
.a {width:190px; height:95px; overflow:hidden;}
.a ul {margin:0px; padding:0px; list-style:none}
.a li {display:block; float:left; width:95px; text-align:center}
-->
</style>
<div id="a" class="a">
<div id="b">
<ul>
<li><img src="aaa.gif" width="90" height="75" /><br>图片名称</li>
<li><img src="aaa.gif" width="90" height="75" /><br>图片名称</li>
<li><img src="aaa.gif" width="90" height="75" /><br>图片名称</li>
<li><img src="aaa.gif" width="90" height="75" /><br>图片名称</li>
<ul>
</div>
</div>
<script type="text/javascript">
<!--
var b = document.getElementById("b");
var iWidth = b.offsetWidth;
if(fCkBrs()!==1)
{
iWidth = parseInt(fGetStyle(b, "width"));
}
defaultStatus = iWidth;
function fGetStyle(Ele, sStyle)
{ // shawl.qiu code, return string; Func: fCkBrs, fRgbToHex
var Brs = fCkBrs();
if(Brs===3||Brs===2)
{
var sReturn = getComputedStyle(Ele, null)[sStyle];
if(/\brgb\b/i.test(sReturn))
{
return fRgbToHex(sReturn);
}
return sReturn;
}
else return Ele.currentStyle[sStyle];
} // end function fGetStyle(Ele, sStyle)
function fCkBrs()
{// shawl.qiu script
switch (navigator.appName)
{
case 'Opera': return 2;
case 'Netscape': return 3;
default: return 1;
}
} // end function fCkBrs function fRgbToHex(sRgb, bNoSharp, bDebug)
{ // shawl.qiu code, return string; Func: fPadStr
if(!sRgb||sRgb=="") throw new Error("RGB颜色代码不正确!");
var Debug = bDebug;
var sSharp = "";
if(!bNoSharp) sSharp = "#";
if(/rgb\(/i.test(sRgb))
{
sRgb = sRgb.replace(/^[\s\S]*?rgb\((.*?)\)[\s\S]*/gi, "$1").replace(/\s+/g, "");
}
var RgbAr = sRgb.split(",");
var sReturn =
[
sSharp
,(fPadStr((RgbAr[0]-0).toString(16)).toUpperCase())
,(fPadStr((RgbAr[1]-0).toString(16)).toUpperCase())
,(fPadStr((RgbAr[2]-0).toString(16)).toUpperCase())
].join("");
if(Debug)alert(sReturn);
return sReturn;
} // end function fRgbToHex(sRgb, bNoSharp, bDebug)
function fPadStr(sSrc, sPad, nLen)
{// shawl.qiu script, return string
if(!sSrc)return false;
if(!sPad)sPad='0';
if(!nLen)nLen=2;
sSrc+='';
if(sSrc.length>=nLen)return sSrc;
sPad=new Array(nLen+1).join(sPad);
var re=new RegExp('.*(.{'+(nLen)+'})$');
return (sPad+sSrc).replace(re,'$1');
} // end function fPadStr
//-->
</script>
</body>
</html>
<!--
.a {width:190px; height:95px; overflow:hidden;}
.a ul {margin:0px; padding:0px; list-style:none}
.a li {display:block; float:left; width:95px; text-align:center}
#b{height:30px;} //假定是30px
-->
</style>
<div id="a" class="a">
<div id="b">
<ul>
<li><img src="aaa.gif" width="90" height="75" /><br>图片名称</li>
<li><img src="aaa.gif" width="90" height="75" /><br>图片名称</li>
<li><img src="aaa.gif" width="90" height="75" /><br>图片名称</li>
<li><img src="aaa.gif" width="90" height="75" /><br>图片名称</li>
<ul>
</div>
</div>
<script type="text/javascript">
<!--
alert(document.getElementById("b").offsetHeight);
//-->
</script>
因为没有定义所以得到的是0
FF就是这样你不定义他就是0，你可以用FF的DOM查看器查看
<!--
.a1 {width:190px; height:95px; overflow:hidden;}
.a1 ul {margin:0px; padding:0px; list-style:none}
.a1 li {display:block; float:left; width:95px; text-align:center}
-->
</style><div id="a" class="a1">
<div id="b">
<ul>
<li><img src="1.gif" width="90" height="75" /><br>图片名称</li>
<li><img src="1.gif" width="90" height="75" /><br>图片名称</li>
<li><img src="1.gif" width="90" height="75" /><br>图片名称</li>
<li><img src="1.gif" width="90" height="75" /><br>图片名称</li>
<ul>
<div style="clear:both"></div>
</div>
</div><script>
alert(document.getElementById("b").offsetHeight);
</script>
用css处理就好了
b值可以取到了。to ljupin
高度差别已经消除了，现在IE6和FF2下高度已经一致了，不过无关紧要！俺也吐了lz两次，哈无缝图片滚动 IE6sp1, FF2.0 测试可用！lz看看满意不？！L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dhtml.div.customizeMarquee.html</title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="[email protected]" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
<!--
.a
{
position: relative;
width: 190px;
height: 95px;
overflow:hidden;
}
.a ul
{
margin:0px;
padding:0px;
list-style:none;
}
.a li
{
display:block;
float: left;
width:95px;
text-align:center
}
.b
{
position: relative;
top: 0px;
float: left;
background-color: yellow;
font-size: 14px;
line-height: 20px;
}
img
{
float: left;
}#divOutput
{
display: none;
padding: 5px 5px 5px 5px;
margin-top: 10px;
background-color: black;
color: white;
}
//-->
</style>
<script type="text/javascript">
<!--// Unit: MilliSecond.
var iInterval = 50;
// Unit: pixel.
var iDistance = 1;var eTarget;
var iHeight;
var iTimerID;function startMarquee()
{
eTarget = document.getElementById("b");
iHeight = eTarget.offsetHeight; var eClone = eTarget.getElementsByTagName("ul")[0].cloneNode(true);
eTarget.appendChild(eClone); iTimerID = setInterval(moveUp,iInterval); eTarget.onmouseover = function()
{
clearInterval(iTimerID);
}; eTarget.onmouseout = function()
{
iTimerID = setInterval(moveUp,iInterval);
};
}function moveUp()
{
var top = parseInt(eTarget.style.top);
if (isNaN(top)) top = 0;
else if (top == -iHeight) top = 0; eTarget.style.top = (top-iDistance) + "px";
}//-->
</script>
</head>
<body onload="startMarquee()">
<h3>无缝图片滚动 IE6sp1, FF2.0 测试可用！</h3>
<div id="a" class="a">
<div id="b" class="b">
<ul>
<li><img src="green_2003.jpg" width="90" height="75" /><br />图片名称1</li>
<li><img src="green_2003.jpg" width="90" height="75" /><br />图片名称2</li>
<li><img src="green_2003.jpg" width="90" height="75" /><br />图片名称3</li>
<li><img src="green_2003.jpg" width="90" height="75" /><br />图片名称4</li>
<ul>
</div>
</div>
<div id="divOutput"></div><script type="text/javascript">
<!--
function showHeight()
{
var b = document.getElementById("b");
var info = "";
for (var p in b)
{
if (p.indexOf("Height")>-1 || p.indexOf("height")>-1)
{
info += p + " : " + b[p] + "<br />";
}
}
var output = document.getElementById("divOutput");
output.style.display = "block";
output.innerHTML = info;
}
showHeight();//-->
</script></body>
</html>
可以参考石头君写的滚动...http://topic.csdn.net/u/20071109/13/82853946-dff7-429f-ad90-30dfee33d7e6.html