Highlighted

How to get left position of an object.

Explorer ,
May 20, 2020

Copy link to clipboard

Copied

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.

 

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>
TOPICS
How to

Views

546

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to get left position of an object.

Explorer ,
May 20, 2020

Copy link to clipboard

Copied

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.

 

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>
TOPICS
How to

Views

547

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 20, 2020 0
Adobe Community Professional ,
May 20, 2020

Copy link to clipboard

Copied

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>

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2020 2
Explorer ,
May 20, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2020 1