Question

我有一个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 =＆＃34; pic_1＆＃34;但是当属性位于外部样式表中时，我不确定如何通过DOM访问top和left属性

/* 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

Answer 1

您需要Window.getComputedStyle()

var style = window.getComputedStyle(theElement);
var posX = parseInt(style.left);
var posY = parseInt(style.top);

使用Javascript从外部CSS读取顶部和左侧位置值

1 个答案: