読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【Javascript】Javascriptで動的にウィンドウサイズを取得

Webページを作成する際に、

 

 

 

 

ウィンドウのサイズでレイアウトが崩れるとか、崩れないとか、、

 

 

 

 

意外とウィンドウの大きさって重要であったりします。

 

 

 

この部品が即時的に役立つかはわかりませんが、動的にウィンドウの大きさがわかるシンプルなものを作りましたので紹介します。

 

 

<html>

<head></head>

<body>

<h2>これはウィンドウ枠サイズを数値化する値</h2>

<body onresize=windowSize()></body> 

<input type="text" id="text2" value="ここに出ます">ウィンドウの高さ

<input type="text" id="text1" value="ここに出ます">ウィンドウの横

<script Language="JavaScript" type="text/javascript">

function windowSize(){

var windowwidth=window.outerWidth;

var windowHeight=window.outerHeight;

document.getElementById("text1").value=windowwidth;

document.getElementById("text2").value=windowHeight;

}

<!--

///メモ ウィンドウのりサイズでイベント発生///

// <body onresize=○○></body> //

///メモ ウィンドウのりサイズでイベント発生///

-->

 

<!--

///メモ2 windowのプロパティでウィンドウのサイズを把握できる///

// window.outerHeight //

// window.outerHeight //

///windowのプロパティでウィンドウのサイズを把握できる///

-->

</script>

</body>

</html>

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }