使用Javascript從外部CSS讀取頂部和左側位置值

我有一個html，js和css文件，它們一起創建拼圖遊戲。我知道當使用style屬性使用內聯css樣式時，我可以很容易地訪問DOM的頂部和左側位置。但是，當信息位於外部樣式表中時，我需要讀取頂部和左側位置。使用Javascript從外部CSS讀取頂部和左側位置值

這裏是我的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文件。這個文件應該允許我拖放圖像文件，它可以與omg id =「pic_1」中使用的內聯css樣式屬性一起使用，但我不確定如何通過通過訪問頂部和左側屬性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

來源

2015-10-23 Spencer

你想Window.getComputedStyle()

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

來源

2015-10-23 00:44:33 Phil

謝謝謝謝謝謝。新的JavaScript學習者試圖通過這種美妙但有時令人沮喪的語言工作。 – Spencer

使用Javascript從外部CSS讀取頂部和左側位置值

回答

相關問題