質問です。
コンテンツ領域がどこまでなのか定義が分かりません。
教えて下さい。
cssでボックス内の座標を調べていた所、"outerBox"idの要素にpadding:50px;と打ったのに、
y軸の座標はpaddingとコンテンツ領域の合計を超えた数値が出ます。(x軸は50pxでpaddingの設定通り)
試しに"innerBox"idを持つ入れ子を作って、これもpx数を図ってみたら、
コンテンツ領域が24pxでボーダー内のy幅の合計が124pxでした。(paddingのy軸合計100pxなので設定通り)
"outerBox"idを持つ要素のy幅合計が156pxでコンテンツ領域は24pxでした。
コンテンツ領域を抜いた幅は132pxだと思うんですが、それだとpaddingに50px持たせたので、
y軸合計幅が100pxになるので32px余ります。
この"outerBox"idの32pxとは何の値なのでしょうか？
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マウスイベントサンプル</title>
<style type="text/css">
#outerBox {
background: thistle;
margin: 50px;
padding: 50px;
}
#innerBox {
padding: 50px;
background: white;
}
</style>
</head>
<body>
<div id="outerBox">テスト
<p id="innerBox">ここはボックス内の段落です。</p>
</div>
<button type="button" onclick="removeMouseInOutEvent()">マウス出入イベントの削除</button>
<ul id="mdgList"></ul>
<script type="text/javascript" src="9Ans.js"></script>
</body>
</html>
座標を表すためのjs構文
function init() {
let outerbox = document.getElementById("outerBox");
outerbox.addEventListener("mousemove", function(event) {
let innerBox = document.getElementById("innerBox");
innerBox.textContent = "x=" + event.offsetX + ":y=" + event.offsetY;
});
}
window.addEventListener("DOMContentLoaded", init());
0
