大家好,又见面了,我是你们的朋友全栈君。
!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=gbk”
/>
<
title
>scrollHeight
</title>
<
style
type
=”text/css”
>
body{margin:0;}
div{font-size:12px;line-height:12px;height:3em;width:5em;}
</style>
</head>
<
body
>
<
div
onclick
=”alert(this.scrollHeight);”
style
=”border:0px solid red;”
>
这里是一大段的文本,我们为了看看scrollHeight怎么用
</div>
</body>
</html>
既然是scroll我们考虑在有文字溢出的情况下使用它,我们会在后面看到这是为了保证跨平台:
1.我们现在宽高设的是3行5列,有个长单词跑出来了先不管。
除了火狐,我们得到的都是72px=文字内容高度就是12px*6因为文字共6行,大于制定的3行,会出滚动条,下面我们指定显示滚动条
overflow-y:scroll;出现y轴的垂直滚筒条,由于滚动条有宽度,把我们的文字挤下了,所以实际列数达不到5个字了,所以出现结果是8行,这样ie和safari的是12px*8=96px;
我们可以加上滚动条的宽度
width设为5em+17px=60px+17px=77px;这样宽度设为77px后,文字还是显示没设置时的6行数,于是scrollHeight还是72px了。
但是要注意的是firefox3.0.6里面如果height指定的值小于16*2=32px时,滚动条不显示,就是那2个箭头,这样实际文字列数可能要比其他浏览器多,于是得到的scrollHeight会小于其他的,因为其他的浏览器,那2个箭头可以缩放。fr
转载于:https://blog.51cto.com/xcf007/132172
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163733.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...