CODEWITHSUNDEEP
javascriptcss
Ms. Corlib
Ms. Corlib

Reputation: 5213

How to check the text-overflow property of a DOM node in JavaScript

I'm trying to check whether a DOM node has a CSS property text-overflow equal to ellipsis. When I try node.text-overflow I get the error

Cannot read property 'text' of undefined

and I've also tried node.textOverflow. What should I be checking?

Upvotes: 0

Views: 586

Answers (3)

Sir. Egole
Sir. Egole

Reputation: 118

Because you are looking to access the CSS property of your node, you need to access it through the style property. Otherwise you had the right idea.

if(node.style.textOverflow == "ellipsis")

You can find the Javascript syntax for the css property at W3Schools.

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26444

object.style.property works to get a property of an object. The property names are lower camel cased. In this case it would be node.style.textOverflow

This is useful for setting property values, but not so much for retrieving them. Even if you use the above, you will still get

Can't read property textOverflow of undefined

This is because most elements don't show all of their attributes when accessed through object.style.

Take a div element for example. It has a default display style of block but accessing it through style will result an empty value.

To display it, we can use getComputedStyle along with getPropertyValue

It's important to note that this method is not available on IE8 or earlier.

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

var par = document.getElementById("par");
var overflowStyle = document.getElementById("overflow-style");

var style = getComputedStyle(par).getPropertyValue("text-overflow");

overflowStyle.innerHTML = style;
#par {
  text-overflow: ellipsis;
  max-width: 150px;
}
<p id="par">This is a really long paragraph</p>

<p id="overflow-style"></p>

Also, take a look at these Stack Overflow posts

Get a CSS value with JavaScript

object.style.x doesn't return anything

Upvotes: 1

Peter
Peter

Reputation: 815

"text-overflow" can't be a variable name (javascript doesn't allow variables with "-" in the name), so maybe try node.style.textOverflow?. Also, if you already have jQuery installed, you may try $(object).css('text-overflow') === 'ellipsis'

Upvotes: 0

Related Questions