CSS備忘録 のバックアップ(No.2)
目的 †
CSSでよく忘れがちなのでメモしておく。
DIVタグのレイアウトを指定する †
#div1 {
color:black;
background-color:white;
position:absolute;
top:20px;
left:40px;
width:200px;
height:300px;
}
HTMLのIDの書き方。 †
ダブルクォートが不要
<div id=div1> hoge </div>
HTMLファイルからCSSファイルを読み込ませる。 †
<link rel="stylesheet" href="css/style.css">
HTMLファイルからJSファイルを読み込ませる。 †
<script type="text/javascript" src="style.js"></script>
jqueryはあたりまえとして、JSでのスタイルシート設定例 †
window.onload = function() {
$("#div2").css("color", "black");
$("#div2").css("background-color", "blue");
$("#div2").css("position", "absolute");
$("#div2").css("top", "20px");
$("#div2").css("left", "340px");
$("#div2").css("width", "200px");
$("#div2").css("height", "300px");
}
マウス位置の座標を知る †
参考URL †
http://www.electrictoolbox.com/jquery-mouse-co-ordinates-mouseover-click-within-element/
<div id="example2-xy" class="mouse-xy">MOUSE XY</div>
<div id="example2" class="mouse-click">MOUSE CLICK AREA</div>
<script language="Javascript">
$('#example2').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('#example2-xy').html("X: " + x + " Y: " + y);
});
</script>
