我有一个html、js和css文件，它们一起创建了一个拼图。我知道，当使用style属性使用内联css样式时，我可以相当容易地访问图像的顶部和左侧位置的DOM。但是，当该信息位于外部样式表中时，我需要读取顶部和左侧的位置。
这是我的html
<!DOCTYPE html>
<html>
<head>
<title> Jigsaw Puzzle </title>
<script type = "text/javascript" src = "./jigsaw.js"></script>
<link rel="stylesheet" type="text/css" href="./jigsaw.css">
</head>
<body onload="return get_images()">
<h1> Solve the Jigsaw Puzzle! </h1>
<img id="grid" src="./puzzleback.gif">
</br>
</br>
<figure id="puzzle_pieces">
<img style="position: absolute; top:400px; left:0px;" id="pic_1" src="" onmousedown="grabber(event);">
<img id="pic_2" src="" onmousedown="grabber(event);">
<img id="pic_3" src="" onmousedown="grabber(event);">
<img id="pic_4" src="" onmousedown="grabber(event);">
<img id="pic_5" src="" onmousedown="grabber(event);">
<img id="pic_6" src="" onmousedown="grabber(event);">
<img id="pic_7" src="" onmousedown="grabber(event);">
<img id="pic_8" src="" onmousedown="grabber(event);">
<img id="pic_9" src="" onmousedown="grabber(event);">
<img id="pic_10" src="" onmousedown="grabber(event);">
<img id="pic_11" src="" onmousedown="grabber(event);">
<img id="pic_12" src="" onmousedown="grabber(event);">
</figure>
</body>
</html>
对于图像id pic_1，我保留了内联样式属性以进行测试。这是我的外部CSS样式表
h1 {
text-align: center;
}
#pic_1 {
position: absolute;
top: 400px;
left: 0px;
}
#pic_2 {
position: absolute;
top: 400px;
left: 100px;
}
#pic_3 {
position: absolute;
top: 400px;
left: 200px;
}
#pic_4 {
position: absolute;
top: 400px;
left: 300px;
}
#pic_5 {
position: absolute;
top: 400px;
left: 400px;
}
#pic_6 {
position: absolute;
top: 500px;
left: 0px;
}
#pic_7 {
position: absolute;
top: 500px;
left: 100px;
}
#pic_8 {
position: absolute;
top: 500px;
left: 200px;
}
#pic_9 {
position: absolute;
top: 500px;
left: 300px;
}
#pic_10 {
position: absolute;
top: 500px;
left: 400px;
}
#pic_11 {
position: absolute;
top: 600px;
left: 0px;
}
#pic_12 {
position: absolute;
top: 600px;
left: 100px;
}
这是我的Javascript文件。这个文件应该允许我拖放图像文件，它与内联css样式属性工作，就像在omg id="pic_1"中使用的一样，但我不确定如何通过DOM访问顶部和左侧属性，当属性位于外部样式表
/* Shuffles the array of images */
function shuffle(array)
{
var currentIndex = array.length;
var temporaryValue;
var randomIndex;
// while there remain elements to shuffle
while (currentIndex !== 0)
{
// Pick an element that remains
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
//Swap that element with the current element
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
/* Generates a random whole number inclusive for a max and min range */
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/* Randomly select directory for the iaages and load images randomly */
function get_images ()
{
var puzzle_pieces = document.getElementById("puzzle_pieces");
var n = getRandomInt(1,3);
var m = [1,2,3,4,5,6,7,8,9,10,11,12];
m = shuffle(m);
for (var i = 0 ; i <= 12 ; i++)
{
puzzle_pieces.children[i].src = "./images"+n+"/img"+ n + "-" + m[i] + ".jpg";
}
}
/*
Define variables for the values computed by the grabber event
handler but needed by mover event handler
*/
var diffX, diffY, theElement;
// The event handler function for grabbing the word
function grabber(event) {
// Set the global variable for the element to be moved
theElement = event.currentTarget;
// Determine the position of the picture to be grabbed,
// first removing the units from left and top
var posX = parseInt(theElement.style.left);
var posY = parseInt(theElement.style.top);
// Compute the difference between where it is and
// where the mouse click occurred
diffX = event.clientX - posX;
diffY = event.clientY - posY;
// Now register the event handlers for moving and
// dropping the word
document.addEventListener("mousemove", mover, true);
document.addEventListener("mouseup", dropper, true);
// Stop propagation of the event and stop any default
// browser action
event.stopPropagation();
event.preventDefault();
} //** end of grabber
// *******************************************************
// The event handler function for moving the word
function mover(event) {
// Compute the new position, add the units, and move the word
theElement.style.left = (event.clientX - diffX) + "px";
theElement.style.top = (event.clientY - diffY) + "px";
// Prevent propagation of the event
event.stopPropagation();
} //** end of mover
// *********************************************************
// The event handler function for dropping the word
function dropper(event) {
// Unregister the event handlers for mouseup and mousemove
document.removeEventListener("mouseup", dropper, true);
document.removeEventListener("mousemove", mover, true);
// Prevent propagation of the event
event.stopPropagation();
} //** end of dropper
你想要windows . getcomputedstyle ()
var style = window.getComputedStyle(theElement);
var posX = parseInt(style.left);
var posY = parseInt(style.top);