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

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

javascript html css

使用Javascript从外部CSS读取顶部和左侧位置值,javascript,html,css,Javascript,Html,Css,我有一个html、js和css文件，它们一起创建了一个拼图。我知道当使用style属性使用内联css样式时，我可以相当容易地访问图像顶部和左侧位置的DOM。但是，当信息位于外部样式表中时，我需要读取顶部和左侧位置这是我的html <!DOCTYPE html> <html> <head> <title> Jigsaw Puzzle </title> <script type = "text/javascript" src =

我有一个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>

这是我的Javascript文件。这个文件应该允许我拖放图像文件，它与内联css样式属性一起工作，就像omg id=“pic_1”中使用的属性一样，但我不确定当属性位于外部样式表中时如何通过DOM访问顶部和左侧属性

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;
}

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

/*洗牌图像数组*/
函数洗牌（数组）
{
var currentIndex=array.length；
var时间值；
var随机指数；
//但仍有一些元素需要洗牌
while（currentIndex！==0）
{
//选择一个保留的元素
randomIndex=Math.floor（Math.random（）*currentIndex）；
currentIndex-=1；
//将该元素与当前元素交换
临时值=数组[currentIndex]；
数组[currentIndex]=数组[randomIndex]；
数组[randomIndex]=临时值；
}
返回数组；
}
/*生成包含最大和最小范围的随机整数*/
函数getRandomInt（最小值、最大值）
{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
/*随机选择iAges的目录并随机加载图像*/
函数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=洗牌（m）；
对于（var i=0；i您想要的
谢谢谢谢。这里的新javascript学习者正在努力学习这门奇妙但有时令人沮丧的语言。
var style = window.getComputedStyle(theElement);
var posX = parseInt(style.left);
var posY = parseInt(style.top);