作者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