How to get left position of an object.

Forum|Forum|5 years ago
May 20, 2020
1 reply
909 views

Hi,

I need to get the left position of an object without to set it, without jquery.
This is the script I'm trying, but doesn't work:

__________________________________

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Set Left Position</title>
<style>
#MyObject{
width: 25%;
top: 100px;
left: 200px;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
background-color: goldenrod;
}
</style>
</head>
<body>
<div id="MyObject"></div>
<h4 id="ShowLeftText">My Left Position Text</h4>
<button onClick="ShowLeftButton();">Show Left Button</button>
<script>
function ShowLeftButton(){
var MyLeftValue = MyObject.style.left;
document.getElementById("ShowLeftText").innerHTML = "My Left value is: " + MyLeftValue;
}
</script>
</body>
</html>

___________________

Can you help me.

Thanks.

How to

This topic has been closed for replies.

Correct answer BenPleysier

Have a look at https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prop_element_offsettop

Use offsetLeft

Edit: The full code is

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Set Left Position</title>
	<style>
		#MyObject {
			width: 25%;
			top: 100px;
			left: 200px;
			height: 200px;
			background-size: cover;
			background-repeat: no-repeat;
			position: absolute;
			background-color: goldenrod;
		}
	</style>
</head>

<body>
	<div id="MyObject"></div>
	<h4>Offset left is: <span id="ShowLeftText"></span></h4>
	<button onClick="ShowLeftButton();">Show Left Button</button>
	<script>
		function ShowLeftButton(){
			var testDiv = document.getElementById("MyObject");
			document.getElementById("ShowLeftText").innerHTML =  testDiv.offsetLeft;
		}
	</script>
</body>

</html>

BenPleysier

Correct answer

Community Expert

Have a look at https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prop_element_offsettop

Use offsetLeft

Edit: The full code is

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Set Left Position</title>
	<style>
		#MyObject {
			width: 25%;
			top: 100px;
			left: 200px;
			height: 200px;
			background-size: cover;
			background-repeat: no-repeat;
			position: absolute;
			background-color: goldenrod;
		}
	</style>
</head>

<body>
	<div id="MyObject"></div>
	<h4>Offset left is: <span id="ShowLeftText"></span></h4>
	<button onClick="ShowLeftButton();">Show Left Button</button>
	<script>
		function ShowLeftButton(){
			var testDiv = document.getElementById("MyObject");
			document.getElementById("ShowLeftText").innerHTML =  testDiv.offsetLeft;
		}
	</script>
</body>

</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

G

gian carlog61267382Author

Inspiring

Thank you very much Ben!!!
This work perfectly!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded