如何在触发 onclick 事件时根据按钮的位置对齐图像？
示例:假设有 2 个按钮，id 分别为 btnA 和 btnB。单击 btnA 时，图像应与 btnA 的中心对齐。如果单击 btnB，图像应该移动并对齐到 btnB 的中心。
<img id = "markerz" src="img/marker.png"/>
<a class="cBtn" id= "btnA" onclick="markerPos(btnA);">Button1</a>
<a class="cBtn" id= "btnB" onclick="markerPos(btnA);">Button2</a>
<script>
function markerPos(BUTTONinUSE){
document.getElementById(markerz).style.align = (document.getElementById(BUTTONinUSE)="center");
}
</script>
最佳答案
获取按钮的位置和大小、图像的位置和大小以及更改图像的位置。
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<style>
img {
position:relative;
}
.clear {
clear:both;
}
a {
padding:20px;
}
</style>
<body>
<img id = "markerz" src="marker.png"></img>
<a class="cBtn" id= "btnA" onclick="markerPos(this);">Button1</a>
<a class="cBtn" id= "btnB" onclick="markerPos(this);">Button2</a>
<script>
'use strict';
var marker = document.getElementById('markerz'),
markerWidth = marker.offsetWidth,
markerLeft = marker.offsetLeft,
markerPos = function (target) {
var left = target.offsetLeft,
selfWidth = target.offsetWidth,
centerWidth = left + selfWidth/2,
horDiff = markerLeft + markerWidth/2 - centerWidth;
marker.style.left = (markerLeft - horDiff) + 'px';
};
</script>
</body>
</html>
关于javascript - 根据按钮操作对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25051016/