リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ 位置を変更するサンプル

JavaScript

位置を変更するサンプル

javascriptでブラウザ幅を取得して位置を変更するサンプル。

【jsで中央配置サンプル】


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>中央配置</title>
<script type="text/javascript">
// <![CDATA[
var haba = innerWidth;
var boxWidth = 200;

window.onload = function(){	
	funcHaba();
}

//ブラウザ幅取得
function funcHaba(){
	haba = innerWidth;
	x = haba / 2 - boxWidth / 2;
	document.getElementById("idBox").style.left = x+"px";
}
// ]]>
</script>
<style type="text/css">
<!--
#idBox {
	z-index: 10;
	display: block;
	width: 200px;
	height: 30px;
	position: absolute;
	bottom: 100px;
	background-color: #FF00FF;
}
-->
</style>
</head>
<body>
<div id="idBox"></div>
</body>
</html>

last update 2010.12.20
参考・出典等
「特に無し」

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2010 Riptac. All Rights Reserved.