Why does the same code using getClientRects() produce different results?
Clash Royale CLAN TAG#URR8PPP
up vote
5
down vote
favorite
I have the code snippet below.
If you press "Run code snippet" then you will see the following
1 - p.getClientRects().length
2 - span.getClientRects().length
But if you press "Expand snippet" at first, and then "Run code snippet" then you will see a bit different result:
1 - p.getClientRects().length
1 - span.getClientRects().length
I just want to understand Element.getClientRects() method. But this situation crashes me. Could you explain why it produces different results?
My browser is: Chrome Version 67.0.3396.99 (Official Build) (64-bit)
var p = document.querySelector('p');
var span = document.querySelector('span');
console.log(p.getClientRects().length, "- p.getClientRects().length");
console.log(span.getClientRects().length, "- span.getClientRects().length");p
border: 1px solid green;
span
border: 1px solid red;
<p>
This is a paragraph with
<span>Span Element having a looooooooooooooooooooooo nnnnnnnnnnnnnnnnnnnn ggggggggggggggggg text</span>
</p>javascript html css
edited Dec 9 at 10:50
Temani Afif
63.4k93574
asked Dec 9 at 9:57
Roman Roman
30711
add a comment |
up vote
5
down vote
favorite
I have the code snippet below.
If you press "Run code snippet" then you will see the following
1 - p.getClientRects().length
2 - span.getClientRects().length
But if you press "Expand snippet" at first, and then "Run code snippet" then you will see a bit different result:
1 - p.getClientRects().length
1 - span.getClientRects().length
I just want to understand Element.getClientRects() method. But this situation crashes me. Could you explain why it produces different results?
My browser is: Chrome Version 67.0.3396.99 (Official Build) (64-bit)
var p = document.querySelector('p');
var span = document.querySelector('span');
console.log(p.getClientRects().length, "- p.getClientRects().length");
console.log(span.getClientRects().length, "- span.getClientRects().length");p
border: 1px solid green;
span
border: 1px solid red;
<p>
This is a paragraph with
<span>Span Element having a looooooooooooooooooooooo nnnnnnnnnnnnnnnnnnnn ggggggggggggggggg text</span>
</p>javascript html css
edited Dec 9 at 10:50
Temani Afif
63.4k93574
asked Dec 9 at 9:57
Roman Roman
30711
2
Just for the record, I get3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.
– Tigger
Dec 9 at 10:02
add a comment |
up vote
5
down vote
favorite
up vote
5
down vote
favorite
I have the code snippet below.
If you press "Run code snippet" then you will see the following
1 - p.getClientRects().length
2 - span.getClientRects().length
But if you press "Expand snippet" at first, and then "Run code snippet" then you will see a bit different result:
1 - p.getClientRects().length
1 - span.getClientRects().length
I just want to understand Element.getClientRects() method. But this situation crashes me. Could you explain why it produces different results?
My browser is: Chrome Version 67.0.3396.99 (Official Build) (64-bit)
var p = document.querySelector('p');
var span = document.querySelector('span');
console.log(p.getClientRects().length, "- p.getClientRects().length");
console.log(span.getClientRects().length, "- span.getClientRects().length");p
border: 1px solid green;
span
border: 1px solid red;
<p>
This is a paragraph with
<span>Span Element having a looooooooooooooooooooooo nnnnnnnnnnnnnnnnnnnn ggggggggggggggggg text</span>
</p>javascript html css
edited Dec 9 at 10:50
Temani Afif
63.4k93574
asked Dec 9 at 9:57
Roman Roman
30711
I have the code snippet below.
If you press "Run code snippet" then you will see the following
1 - p.getClientRects().length
2 - span.getClientRects().length
But if you press "Expand snippet" at first, and then "Run code snippet" then you will see a bit different result:
1 - p.getClientRects().length
1 - span.getClientRects().length
I just want to understand Element.getClientRects() method. But this situation crashes me. Could you explain why it produces different results?
My browser is: Chrome Version 67.0.3396.99 (Official Build) (64-bit)
var p = document.querySelector('p');
var span = document.querySelector('span');
console.log(p.getClientRects().length, "- p.getClientRects().length");
console.log(span.getClientRects().length, "- span.getClientRects().length");p
border: 1px solid green;
span
border: 1px solid red;
<p>
This is a paragraph with
<span>Span Element having a looooooooooooooooooooooo nnnnnnnnnnnnnnnnnnnn ggggggggggggggggg text</span>
</p>var p = document.querySelector('p');
var span = document.querySelector('span');
console.log(p.getClientRects().length, "- p.getClientRects().length");
console.log(span.getClientRects().length, "- span.getClientRects().length");p
border: 1px solid green;
span
border: 1px solid red;
<p>
This is a paragraph with
<span>Span Element having a looooooooooooooooooooooo nnnnnnnnnnnnnnnnnnnn ggggggggggggggggg text</span>
</p>var p = document.querySelector('p');
var span = document.querySelector('span');
console.log(p.getClientRects().length, "- p.getClientRects().length");
console.log(span.getClientRects().length, "- span.getClientRects().length");p
border: 1px solid green;
span
border: 1px solid red;
<p>
This is a paragraph with
<span>Span Element having a looooooooooooooooooooooo nnnnnnnnnnnnnnnnnnnn ggggggggggggggggg text</span>
</p>javascript html css
javascript html css
edited Dec 9 at 10:50
Temani Afif
63.4k93574
asked Dec 9 at 9:57
Roman Roman
30711
edited Dec 9 at 10:50
Temani Afif
63.4k93574
asked Dec 9 at 9:57
Roman Roman
30711
edited Dec 9 at 10:50
Temani Afif
63.4k93574
edited Dec 9 at 10:50
Temani Afif
63.4k93574
edited Dec 9 at 10:50
Temani Afif
63.4k93574
63.4k93574
asked Dec 9 at 9:57
Roman Roman
30711
asked Dec 9 at 9:57
Roman Roman
30711
asked Dec 9 at 9:57
Roman Roman
30711
30711
2
Just for the record, I get3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.
– Tigger
Dec 9 at 10:02
add a comment |
2
Just for the record, I get3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.
– Tigger
Dec 9 at 10:02
2
2
Just for the record, I get
3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.– Tigger
Dec 9 at 10:02
Just for the record, I get
3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.– Tigger
Dec 9 at 10:02
add a comment |
1 Answer
1
active
oldest
votes
up vote
8
down vote
accepted
Un-expanded, the text wraps, so you have two separate rectangles:
Expanded, the text all fits on one line, so you have only one rectangle:
answered Dec 9 at 10:00
T.J. Crowder
674k11911941289
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 at 10:07
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53691154%2fwhy-does-the-same-code-using-getclientrects-produce-different-results%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
8
down vote
accepted
Un-expanded, the text wraps, so you have two separate rectangles:
Expanded, the text all fits on one line, so you have only one rectangle:
answered Dec 9 at 10:00
T.J. Crowder
674k11911941289
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 at 10:07
add a comment |
up vote
8
down vote
accepted
Un-expanded, the text wraps, so you have two separate rectangles:
Expanded, the text all fits on one line, so you have only one rectangle:
answered Dec 9 at 10:00
T.J. Crowder
674k11911941289
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 at 10:07
add a comment |
up vote
8
down vote
accepted
up vote
8
down vote
accepted
Un-expanded, the text wraps, so you have two separate rectangles:
Expanded, the text all fits on one line, so you have only one rectangle:
answered Dec 9 at 10:00
T.J. Crowder
674k11911941289
Un-expanded, the text wraps, so you have two separate rectangles:
Expanded, the text all fits on one line, so you have only one rectangle:
answered Dec 9 at 10:00
T.J. Crowder
674k11911941289
edited Dec 9 at 10:06
answered Dec 9 at 10:00
T.J. Crowder
674k11911941289
answered Dec 9 at 10:00
T.J. Crowder
674k11911941289
answered Dec 9 at 10:00
T.J. Crowder
674k11911941289
674k11911941289
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 at 10:07
add a comment |
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 at 10:07
Excellent! You also solved my problem with understanding
getClientRects() method– Roman Roman
Dec 9 at 10:07
Excellent! You also solved my problem with understanding
getClientRects() method– Roman Roman
Dec 9 at 10:07
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53691154%2fwhy-does-the-same-code-using-getclientrects-produce-different-results%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Just for the record, I get
3 - span.getClientRects().length. Running Firefox on Linux. It is to do with font sizes and element rendering.– Tigger
Dec 9 at 10:02