-3

I want to display the length of a span tag on my web page. I researched for ways but could not find one.

I researched for ways but could not find one. Is there a way if not please tell me. I am using vuejs2 so if there is a way with vuejs2, then please tell me so.

<span>Hello World!</span>
<p>
  <!-- The width of span tag above goes here with document.getElementById("").innerHTML -->
</p>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
Visal Yogaraj
  • 15
  • 7

3 Answers3

0

YOu get the width in pixel by using offsetWidth and the width in chars by using textContent.length.

If you want to print it into another element, you need to reference the element and can include it with textContent as well. Outputting some JS calculations is not suitable for a <p> as it expects flow-text but for an <output> element!

const SPAN = document.querySelector('span');

// get width in pixel
console.log(`width in pixel: ${SPAN.offsetWidth}px`);

// width in chars
console.log(`width in chars: ${SPAN.textContent.length}`);
<span>Hello World</span>

PS: You should not use innerHTML to write an output as it is comparable slow (reparsing DOM) and poses security issues (XSS injections). If you just want to print an output use textContent.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
-1

I assume you mean the width in pixels?

If so, you'd do something like this:

// give your span a class 
// <span class='test-span'>test</span>

// create a function to get the width
function getSpanWidth() {
  let span = document.querySelector('.test-span')
  let width = span.offsetWidth
  
  return width
 }

Offset width includes the padding.

Sokmixtp
  • 57
  • 5
  • `offsetwidth` also includes the border. If you just want to include the padding then it would be `clientWidth` For that you do not need a function or return anything. – tacoshy Jul 11 '23 at 20:58
-1

To find the length in text characters, you can simply use the textContent.length property for strings.

Code:

<!DOCTYPE html>
<html>
<span id="test1">Hello World!</span>
<p id="test2">
  <!-- The width of span tag above goes here with document.getElementById("").innerText -->
</p>
<script>
  var spanLength = document.getElementById("test1").textContent.length;
  document.getElementById("test2").innerText = spanLength;
</script>

</html>

Also the innerHTML property isn't for changing text in an element, it is for adding new html elements inside that element. Use innerText instead.

Now, if you want the width of an html element in px, you can use the offsetWidth property.

Code:

<!DOCTYPE html>
<html>
<span id="test1">Hello World!</span>
<p id="test2">
  <!-- The width of span tag above goes here with document.getElementById("").innerText -->
</p>
<script>
  var spanLength = document.getElementById("test1").offsetWidth;
  document.getElementById("test2").innerText = spanLength + "px";
</script>

</html>
Pete21
  • 102
  • 11
  • You don't use `innerText` nowadays as it is comparably slow to `textContent`. Beyond that, you do not use `onload` either as it overwrites all events but append events by using `addEventListener`. This however is completely unnecessary as you wrote the script tag after the elements and as such the script would know the elements anyways. – tacoshy Jul 11 '23 at 21:02
  • @tacoshy, I know that, but since this is a simple question, I didn't feel the need to, but I will change it anyway. Thanks. – Pete21 Jul 11 '23 at 21:05