Why does the same code using getClientRects() produce different results?
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 '18 at 10:50
Temani Afif
65.1k93775
asked Dec 9 '18 at 9:57
Roman Roman
30711
add a comment |
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 '18 at 10:50
Temani Afif
65.1k93775
asked Dec 9 '18 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 '18 at 10:02
add a comment |
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 '18 at 10:50
Temani Afif
65.1k93775
asked Dec 9 '18 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 '18 at 10:50
Temani Afif
65.1k93775
asked Dec 9 '18 at 9:57
Roman Roman
30711
edited Dec 9 '18 at 10:50
Temani Afif
65.1k93775
asked Dec 9 '18 at 9:57
Roman Roman
30711
edited Dec 9 '18 at 10:50
Temani Afif
65.1k93775
edited Dec 9 '18 at 10:50
Temani Afif
65.1k93775
edited Dec 9 '18 at 10:50
Temani Afif
65.1k93775
65.1k93775
asked Dec 9 '18 at 9:57
Roman Roman
30711
asked Dec 9 '18 at 9:57
Roman Roman
30711
asked Dec 9 '18 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 '18 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 '18 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 '18 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 '18 at 10:02
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 10:00
T.J. Crowder
677k12111981295
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 '18 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
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 '18 at 10:00
T.J. Crowder
677k12111981295
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 '18 at 10:07
add a comment |
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 '18 at 10:00
T.J. Crowder
677k12111981295
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 '18 at 10:07
add a comment |
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 '18 at 10:00
T.J. Crowder
677k12111981295
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 '18 at 10:00
T.J. Crowder
677k12111981295
edited Dec 9 '18 at 10:06
answered Dec 9 '18 at 10:00
T.J. Crowder
677k12111981295
answered Dec 9 '18 at 10:00
T.J. Crowder
677k12111981295
answered Dec 9 '18 at 10:00
T.J. Crowder
677k12111981295
677k12111981295
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 '18 at 10:07
add a comment |
Excellent! You also solved my problem with understandinggetClientRects()method
– Roman Roman
Dec 9 '18 at 10:07
Excellent! You also solved my problem with understanding
getClientRects() method– Roman Roman
Dec 9 '18 at 10:07
Excellent! You also solved my problem with understanding
getClientRects() method– Roman Roman
Dec 9 '18 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 '18 at 10:02