新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、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; }