作者shadowjohn (3WA问题解决专家)
看板Ajax
标题Re: [问题] 请问宽高设定auto怎麽取值呢？
时间Wed Dec 2 17:59:17 2009
※ 引述《Kuster (克斯特)》之铭言：
: 请教各位前辈
: 如果我的元件(div或td)，宽高设定成百分比，即 25% 与 75% 这种
: 那我要怎麽取得『实际数值』呢？
: 因为我想要将画面设定成有『拉杆』的，即css设定overflow : true
: 但是这样设定必须指定该元件的宽高数值
: 我想要让这个元件随着视窗大小变化
: 又想要让它具有『拉杆』
: 请问该怎麽做呢？
: 谢谢！
路过分享一下个人的心得~
通常我会把html﹑body都指定大小
然後於body里，再用一个 div ，从头包到尾，好像有点号呆
不过这招常解决我的问题...
<html>
<head>
<style>
html,body{
height:100%;
width:100%;
overflow:hidden;
margin:0px;
}
</style>
<!--加点 js ，让我取得使用者萤幕内文的宽高-->
<script language="javascript">
function getWIN_W_H(){
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && (
document.documentElement.clientWidth || document.documentElement.clientHeight
) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var a = new Object();
a['width']=myWidth;
a['height']=myHeight;
return a;
}
//取得宽高也是要 document ready 以後才有 body 给你抓~
$(document).ready(function(){
var mywindow_size = getWIN_W_H();
alert("Width:"+mywindow_size['width']);
alert("Height:"+mywindow_size['height']);
//很好，有得到宽高了吧~
//至於你说的，要得到 「实际大小的 px」
var realsize_width = mywindow_size['width'] * 50/100; //(50%)
alert(realsize_width);
});
</script>
</head>
<body>
<center>
<br>
<div style="width:50%;height:50%;overflow:auto;border:1px solid #000000;">
asdfasdfasfasdfsdf <br> ---> 放超多试看看
</div>
</center>
</body>
</html>
只好这样了...
--
3WA训练家的工作室
宗旨：诸葛单中，谢谢
个人布弱格 网址：
http://3wa.tw
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 122.116.47.155