2011.11.09
最近使うことが多いJSです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
コメントする