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?
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
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.
"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'
