CODEWITHSUNDEEP
javascripthtmlcss
Qwertiy
Qwertiy

Reputation: 21440

How to get correct content size of a div?

Here are 2 blocks and first of them has click handler which assigns scrollWidth of the block to it's width property. There no padding or borders, but when the property is assigned, one word is wrapped to the next line.

As I understand it happens because scrollWidth returns 270, when the value visible in web inspector is 270.08. If I set width value to 270.08 the word won't be wrapped to the next line.

How can I get real width of content including fractional part?

By the way, getComputedStyle(...).width returns "270.078px", but this method is not suitable in case if block has overflow. I need size of the contents.

The second click on div will set width to it's compuded value.

https://jsfiddle.net/0dqzvw4r/

document.querySelector('p').addEventListener('click', function first(event) {
  var width = this.scrollWidth;
  var real = getComputedStyle(this).width;
  
  console.log(width);
  console.log(real);
  
  this.style.width = width + 'px';
  
  this.removeEventListener('click', first);
  this.addEventListener('click', function (event) {
    this.style.width = real;
  });
});
body {
  font-family: 'Shrikhand', cursive;
}

p {
  outline: 1px dotted red;
  float: left;
  clear: left;
}
<link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet">
<p>How to get correct content size?</p>
<p>How to get correct content size?</p>

More complex example:

Same thing with horizontal scroll. After assigning width property white-spase is set to normal. The first block gets exactly scrollWidth and the second one gets 1 pixel more.

document.querySelector('p').addEventListener('click', function (event) {
  var width = this.scrollWidth;
  console.log(width);
  this.style.width = width + 'px';
  this.nextElementSibling.style.width = width + 1 + 'px';
});
body {
  font-family: 'Shrikhand', cursive;
}

p {
  outline: 1px dotted red;
  float: left;
  clear: left;
  width: 10em;
  white-space: nowrap;
  overflow: auto;
}

p[style] {
  white-space: normal;
}
<link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet">
<p>How to get correct content size?</p>
<p>How to get correct content size?</p>

Upvotes: 2

Views: 248

Answers (2)

Luke Becker
Luke Becker

Reputation: 894

This returns 270.078px. I think this will work for you.

document.querySelector('p').addEventListener('click', function (event) {
  var width = window.getComputedStyle(this).width;
  console.log(width);
  this.style.width = width + 'px';
  
});
body {
  font-family: 'Shrikhand', cursive;
}

p {
  outline: 1px dotted red;
  float: left;
  clear: left;
}
<link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet">
<p>How to get correct content size?</p>
<p>How to get correct content size?</p>

Upvotes: 2

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

Element.getBoundingClientRect() seems to work for you:

document.querySelector('p').addEventListener('click', function (event) {
  var width = this.getBoundingClientRect().width;
  console.log(width);
  this.style.width = width + 'px';
});
body {
  font-family: 'Shrikhand', cursive;
}

p {
  outline: 1px dotted red;
  float: left;
  clear: left;
}
<link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet">
<p>How to get correct content size?</p>
<p>How to get correct content size?</p>

Upvotes: 2

Related Questions