Cant get offset of div

this is my getoffset js code to get div width and left

 var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
 var objOffset = objRedPacketDivStyle.offset();
 var intWidth = objOffset.offsetWidth;
 var objWidthStart = objOffset.offset.left;
 var objWidthEnd = objWidthStart + intWidth;
 alert(objWidthStart + objWidthEnd);

and here is my div and css

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

#styRedPacketAppear 
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 98;
pointer-events: none;

asked Nov 15 '18 at 10:07

Chau Chun

255

where the JS code is placed?

– Temani Afif
Nov 15 '18 at 10:10

What is the problem you are facing? Please be more specific, are there errors in the console or what is happening that you did not intend to happen?

– Esko
Nov 15 '18 at 10:10

See in F12-> console the errors

– לבני מלכה
Nov 15 '18 at 10:12

I think .offset() belong to Jquey not javascript

– לבני מלכה
Nov 15 '18 at 10:14

add a comment |

this is my getoffset js code to get div width and left

 var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
 var objOffset = objRedPacketDivStyle.offset();
 var intWidth = objOffset.offsetWidth;
 var objWidthStart = objOffset.offset.left;
 var objWidthEnd = objWidthStart + intWidth;
 alert(objWidthStart + objWidthEnd);

and here is my div and css

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

#styRedPacketAppear 
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 98;
pointer-events: none;

asked Nov 15 '18 at 10:07

Chau Chun

255

where the JS code is placed?

– Temani Afif
Nov 15 '18 at 10:10

What is the problem you are facing? Please be more specific, are there errors in the console or what is happening that you did not intend to happen?

– Esko
Nov 15 '18 at 10:10

See in F12-> console the errors

– לבני מלכה
Nov 15 '18 at 10:12

I think .offset() belong to Jquey not javascript

– לבני מלכה
Nov 15 '18 at 10:14

add a comment |

this is my getoffset js code to get div width and left

 var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
 var objOffset = objRedPacketDivStyle.offset();
 var intWidth = objOffset.offsetWidth;
 var objWidthStart = objOffset.offset.left;
 var objWidthEnd = objWidthStart + intWidth;
 alert(objWidthStart + objWidthEnd);

and here is my div and css

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

#styRedPacketAppear 
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 98;
pointer-events: none;

asked Nov 15 '18 at 10:07

Chau Chun

255

this is my getoffset js code to get div width and left

 var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
 var objOffset = objRedPacketDivStyle.offset();
 var intWidth = objOffset.offsetWidth;
 var objWidthStart = objOffset.offset.left;
 var objWidthEnd = objWidthStart + intWidth;
 alert(objWidthStart + objWidthEnd);

and here is my div and css

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

#styRedPacketAppear 
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 98;
pointer-events: none;

javascript css

asked Nov 15 '18 at 10:07

Chau Chun

255

asked Nov 15 '18 at 10:07

Chau Chun

255

asked Nov 15 '18 at 10:07

Chau Chun

255

asked Nov 15 '18 at 10:07

Chau Chun

255

asked Nov 15 '18 at 10:07

Chau Chun

255

where the JS code is placed?

– Temani Afif
Nov 15 '18 at 10:10

What is the problem you are facing? Please be more specific, are there errors in the console or what is happening that you did not intend to happen?

– Esko
Nov 15 '18 at 10:10

See in F12-> console the errors

– לבני מלכה
Nov 15 '18 at 10:12

I think .offset() belong to Jquey not javascript

– לבני מלכה
Nov 15 '18 at 10:14

add a comment |

where the JS code is placed?

– Temani Afif
Nov 15 '18 at 10:10

What is the problem you are facing? Please be more specific, are there errors in the console or what is happening that you did not intend to happen?

– Esko
Nov 15 '18 at 10:10

See in F12-> console the errors

– לבני מלכה
Nov 15 '18 at 10:12

I think .offset() belong to Jquey not javascript

– לבני מלכה
Nov 15 '18 at 10:14

where the JS code is placed?

– Temani Afif
Nov 15 '18 at 10:10

What is the problem you are facing? Please be more specific, are there errors in the console or what is happening that you did not intend to happen?

– Esko
Nov 15 '18 at 10:10

See in F12-> console the errors

– לבני מלכה
Nov 15 '18 at 10:12

I think .offset() belong to Jquey not javascript

– לבני מלכה
Nov 15 '18 at 10:14

add a comment |

2 Answers
2

active

oldest

votes

This isn't working as .offset() is a jQuery method. Since you don't have jquery you need to use vanilla javascript to achieve this.

You can use:

element.offsetWidth: "returns the layout width of an element as an integer." - MDN

element.offsetLeft: "returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node." - MDN

Using these two properties will resolve your issue:

var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
// Remove this: var objOffset = objRedPacketDivStyle.position.offset();
var intWidth = objRedPacketDivStyle.offsetWidth;
var objWidthStart = objRedPacketDivStyle.offsetLeft;
var objWidthEnd = objWidthStart + intWidth;
alert(objWidthStart + objWidthEnd);

#styRedPacketAppear 
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 98;
 pointer-events: none;

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

edited Nov 15 '18 at 10:34

answered Nov 15 '18 at 10:15

Nick Parsons

9,7012826

1

nice... That's what I just came to post .. (LOL)

– לבני מלכה
Nov 15 '18 at 10:17

Thank a lot, it is work!

– Chau Chun
Nov 15 '18 at 10:25

@ChauChun no worries! Glad to help :)

– Nick Parsons
Nov 15 '18 at 10:25

add a comment |

The offsetTop property returns the top position (in pixels) relative to the top of the offsetParent element.
The returned value includes:
-the top position, and margin of the element
-the top padding, scrollbar and border of the offsetParent element.

#test 
 top: 100px;
 margin: 10px;
 padding: 10px;
 width: 300px;
 position: fixed;
 border: 5px solid black


var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;

Result-offsetTop is: 110

answered Nov 15 '18 at 10:25

Mohit Verma

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53316953%2fcant-get-offset-of-div%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

This isn't working as .offset() is a jQuery method. Since you don't have jquery you need to use vanilla javascript to achieve this.

You can use:

element.offsetWidth: "returns the layout width of an element as an integer." - MDN

element.offsetLeft: "returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node." - MDN

Using these two properties will resolve your issue:

var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
// Remove this: var objOffset = objRedPacketDivStyle.position.offset();
var intWidth = objRedPacketDivStyle.offsetWidth;
var objWidthStart = objRedPacketDivStyle.offsetLeft;
var objWidthEnd = objWidthStart + intWidth;
alert(objWidthStart + objWidthEnd);

#styRedPacketAppear 
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 98;
 pointer-events: none;

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

edited Nov 15 '18 at 10:34

answered Nov 15 '18 at 10:15

Nick Parsons

9,7012826

1

nice... That's what I just came to post .. (LOL)

– לבני מלכה
Nov 15 '18 at 10:17

Thank a lot, it is work!

– Chau Chun
Nov 15 '18 at 10:25

@ChauChun no worries! Glad to help :)

– Nick Parsons
Nov 15 '18 at 10:25

add a comment |

This isn't working as .offset() is a jQuery method. Since you don't have jquery you need to use vanilla javascript to achieve this.

You can use:

element.offsetWidth: "returns the layout width of an element as an integer." - MDN

element.offsetLeft: "returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node." - MDN

Using these two properties will resolve your issue:

var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
// Remove this: var objOffset = objRedPacketDivStyle.position.offset();
var intWidth = objRedPacketDivStyle.offsetWidth;
var objWidthStart = objRedPacketDivStyle.offsetLeft;
var objWidthEnd = objWidthStart + intWidth;
alert(objWidthStart + objWidthEnd);

#styRedPacketAppear 
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 98;
 pointer-events: none;

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

edited Nov 15 '18 at 10:34

answered Nov 15 '18 at 10:15

Nick Parsons

9,7012826

1

nice... That's what I just came to post .. (LOL)

– לבני מלכה
Nov 15 '18 at 10:17

Thank a lot, it is work!

– Chau Chun
Nov 15 '18 at 10:25

@ChauChun no worries! Glad to help :)

– Nick Parsons
Nov 15 '18 at 10:25

add a comment |

This isn't working as .offset() is a jQuery method. Since you don't have jquery you need to use vanilla javascript to achieve this.

You can use:

element.offsetWidth: "returns the layout width of an element as an integer." - MDN

element.offsetLeft: "returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node." - MDN

Using these two properties will resolve your issue:

var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
// Remove this: var objOffset = objRedPacketDivStyle.position.offset();
var intWidth = objRedPacketDivStyle.offsetWidth;
var objWidthStart = objRedPacketDivStyle.offsetLeft;
var objWidthEnd = objWidthStart + intWidth;
alert(objWidthStart + objWidthEnd);

#styRedPacketAppear 
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 98;
 pointer-events: none;

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

edited Nov 15 '18 at 10:34

answered Nov 15 '18 at 10:15

Nick Parsons

9,7012826

This isn't working as .offset() is a jQuery method. Since you don't have jquery you need to use vanilla javascript to achieve this.

You can use:

element.offsetWidth: "returns the layout width of an element as an integer." - MDN

element.offsetLeft: "returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node." - MDN

Using these two properties will resolve your issue:

var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
// Remove this: var objOffset = objRedPacketDivStyle.position.offset();
var intWidth = objRedPacketDivStyle.offsetWidth;
var objWidthStart = objRedPacketDivStyle.offsetLeft;
var objWidthEnd = objWidthStart + intWidth;
alert(objWidthStart + objWidthEnd);

#styRedPacketAppear 
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 98;
 pointer-events: none;

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
// Remove this: var objOffset = objRedPacketDivStyle.position.offset();
var intWidth = objRedPacketDivStyle.offsetWidth;
var objWidthStart = objRedPacketDivStyle.offsetLeft;
var objWidthEnd = objWidthStart + intWidth;
alert(objWidthStart + objWidthEnd);

#styRedPacketAppear 
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 98;
 pointer-events: none;

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

var objRedPacketDivStyle = document.getElementById("styRedPacketAppear");
// Remove this: var objOffset = objRedPacketDivStyle.position.offset();
var intWidth = objRedPacketDivStyle.offsetWidth;
var objWidthStart = objRedPacketDivStyle.offsetLeft;
var objWidthEnd = objWidthStart + intWidth;
alert(objWidthStart + objWidthEnd);

#styRedPacketAppear 
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 98;
 pointer-events: none;

<div class="styRedPacketAppear" id="styRedPacketAppear"></div>

edited Nov 15 '18 at 10:34

answered Nov 15 '18 at 10:15

Nick Parsons

9,7012826

edited Nov 15 '18 at 10:34

answered Nov 15 '18 at 10:15

Nick Parsons

9,7012826

answered Nov 15 '18 at 10:15

Nick Parsons

9,7012826

answered Nov 15 '18 at 10:15

Nick Parsons

9,7012826

1

nice... That's what I just came to post .. (LOL)

– לבני מלכה
Nov 15 '18 at 10:17

Thank a lot, it is work!

– Chau Chun
Nov 15 '18 at 10:25

@ChauChun no worries! Glad to help :)

– Nick Parsons
Nov 15 '18 at 10:25

add a comment |

1

nice... That's what I just came to post .. (LOL)

– לבני מלכה
Nov 15 '18 at 10:17

Thank a lot, it is work!

– Chau Chun
Nov 15 '18 at 10:25

@ChauChun no worries! Glad to help :)

– Nick Parsons
Nov 15 '18 at 10:25

nice... That's what I just came to post .. (LOL)

– לבני מלכה
Nov 15 '18 at 10:17

Thank a lot, it is work!

– Chau Chun
Nov 15 '18 at 10:25

@ChauChun no worries! Glad to help :)

– Nick Parsons
Nov 15 '18 at 10:25

add a comment |

#test 
 top: 100px;
 margin: 10px;
 padding: 10px;
 width: 300px;
 position: fixed;
 border: 5px solid black


var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;

Result-offsetTop is: 110

answered Nov 15 '18 at 10:25

Mohit Verma

add a comment |

#test 
 top: 100px;
 margin: 10px;
 padding: 10px;
 width: 300px;
 position: fixed;
 border: 5px solid black


var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;

Result-offsetTop is: 110

answered Nov 15 '18 at 10:25

Mohit Verma

add a comment |

#test 
 top: 100px;
 margin: 10px;
 padding: 10px;
 width: 300px;
 position: fixed;
 border: 5px solid black


var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;

Result-offsetTop is: 110

answered Nov 15 '18 at 10:25

Mohit Verma

#test 
 top: 100px;
 margin: 10px;
 padding: 10px;
 width: 300px;
 position: fixed;
 border: 5px solid black


var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;

Result-offsetTop is: 110

#test 
 top: 100px;
 margin: 10px;
 padding: 10px;
 width: 300px;
 position: fixed;
 border: 5px solid black


var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;

Result-offsetTop is: 110

#test 
 top: 100px;
 margin: 10px;
 padding: 10px;
 width: 300px;
 position: fixed;
 border: 5px solid black


var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;

Result-offsetTop is: 110

answered Nov 15 '18 at 10:25

Mohit Verma

answered Nov 15 '18 at 10:25

Mohit Verma

answered Nov 15 '18 at 10:25

Mohit Verma

answered Nov 15 '18 at 10:25

Mohit Verma

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj