javascriptで表示エリアのサイズを取得し、なおかつstyleとして挿入する

Yukimi Sato 573views 更新:2014年9月4日

javascript

<script type="text/javascript">
window.onload=function(){
document.getElementById("sh").style.height=Math.floor(document.documentElement.clientHeight)+"px";
}
</script>

HTML

<div id="sh"></div>

結果

<div id="sh" style="height:800px;"></div>

style=”height:800px;” がjsで挿入される部分です。

応用編

<script type="text/javascript">
window.onload=function(){
document.getElementById("sh").style.height=Math.floor(document.documentElement.clientHeight-140)+"px";
}
</script>

-140 というところは140pxを表示エリアから引くということをしているので、paddingなどで100%よりもいくらか少ない場合にその数値を入れれば希望の高さを出すこともできます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません