Why am I unable to access and modify the object.style.left & object.style.top values?
I am currently attempting to dynamically reposition a button on a webpage.
In order to set new values for the style.left & style.top, I can utilize JavaScript like this:
document.getElementById(theButton_ID).style.left = "128px";
document.getElementById(theButton_ID).style.top = "64px";
However, my challenge lies in dynamically recalculating the 'style.left' & 'style.top' values based on a scaling factor that needs to be calculated when the page loads.
To achieve this, I believe I need to:
• Retrieve the current style.left & style.top values
• Multiply them by the scaling factor
• Assign these modified values back to the style.left & style.top properties
The main issue I'm facing is the inability to obtain the initial style.left & style.top values so that I can manipulate them accordingly.
It's clear that there's a mistake in my approach and possibly something crucial that I'm overlooking.
What could I be doing wrong? What key concept am I failing to grasp?
And most importantly, how can I retrieve the value of style.left & style.top to dynamically adjust the button's position?
Thank you to everyone for your assistance and suggestions.
Below is the actual HTML/CSS/JavaScript code snippet:
<html>
<head>
<title>Button Dynamic Move Test</title>
<style type="text/css">
#MoveButton
{
position : absolute;
left : 8px;
top : 16px;
}
</style>
<script>
// var X_Index_Move_Factor = 1.25;
// var Y_Index_Move_Factor = 1.50;
function Move_A_Button (theButton_ID)
{
alert ( "We're in 'Move_A_Button'"
+ "\n"
+ " The Button Id = "
+ theButton_ID
);
var the_Old_Button_X_Offset = document.getElementById(theButtonId).style.left;
var the_Old_Button_Y_Offset = document.getElementById(theButtonId).style.top;
alert ( "the_Old_Button_X_Offset = "
+ "\n"
+ the_Old_Button_X_Offset
+ "the_Old_Button_Y_Offset = "
+ "\n"
+ the_Old_Button_Y_Offset
);
}
</script>
</head>
<body>
<button type = "button"
id = "MoveButton"
onclick = "Move_A_Button ('MoveButton')">
About Us
</button>
</body>
</html>