How to check if HTML style attribute exists with javascript

Question

I'm trying to find out if a specific element has an inline style attribute or not: I'm sure there's an easy method to check this, but I can't seem to find it. I tried multiple things already including this:

var contentWrapper = document.getElementById("contentWrapper");
if(contentWrapper.style.display.toString=="")
alert("Empty");
else
alert("Not Empty");

Thank you for your help!

possible duplicate of How can I check if attribute exists or not in Jquery — InspiredCoder
– InspiredCoder, Commented Sep 5, 2013 at 11:35
Also, be careful when calling functions to make sure you add parenthesis. display.toString == "" is comparing the function , when you want to compare the return value of the function. It should be display.toString() == "". (Not that you need .toString() here anyway, as display is already a string, but it's another reason why your code might fail) — freefaller
– freefaller, Commented Sep 5, 2013 at 12:40
The two duplicates linked provide solutions in jQuery which is not explictly asked for by the user; therefore, this is not a duplicate of either of those questions. — Josh Mein
– Josh Mein, Commented Sep 5, 2013 at 13:44

Praind · Accepted Answer · 2013-09-05 11:38:44Z

19

if(contentWrapper.getAttribute("style")){
    if(contentWrapper.getAttribute("style").indexOf("display:") != -1){
        alert("Not Empty");
    } else {
        alert("Empty");
    }
}

answered Sep 5, 2013 at 11:38

Praind

1,5911 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LarAng Over a year ago

This is not so perfect for commentarized strings like this "/* font-size: 24px; */". In this case it works as if font-size exists.

wakqasahmed · Accepted Answer · 2013-09-05 13:18:29Z

8

if(!contentWrapper.getAttribute("style"))

OR

if(contentWrapper.getAttribute("style")==null || 
   contentWrapper.getAttribute("style")=="")

the above lines will work for you (anyone can be chosen).

In second solution:

first check watches if style attribute is present in the element, 2nd check ensures that style attribute is not present as an empty string e.g. <div id="contentWrapper" style="">

Complete code is given below:

var contentWrapper = document.getElementById("contentWrapper");
if(contentWrapper.getAttribute("style")==null || contentWrapper.getAttribute("style")=="")
alert("Empty");
else
alert("Not Empty");

http://jsfiddle.net/mastermindw/fjuZW/ (1st Solution)

http://jsfiddle.net/mastermindw/fjuZW/1/ (2nd Solution)

edited Sep 5, 2013 at 13:18

answered Sep 5, 2013 at 11:48

wakqasahmed

2,1091 gold badge18 silver badges23 bronze badges

3 Comments

plalx Over a year ago

The double check is unecessary, since both, null and '' are falsey. Also, developer.mozilla.org/en-US/docs/Web/API/element.hasAttribute would be better.

wakqasahmed Over a year ago

2nd check is to make sure that style attribute is not present as an empty string e.g. <div id="contentWrapper" style="">

plalx Over a year ago

I know, but what I mean is that Boolean('') is false. So if (!contentWrapper.getAttribute('style')) { //empty } works for null or ''.

Syknapse · Accepted Answer · 2021-01-19 10:42:39Z

2

The style object has a length property which tells you if the element has any inline styles or not. This also avoids the problem of having the attribute style being present but empty.

// Would be 0 if no styles are applied and > 0 if there are inline styles applied
contentWrapper.style.length
// So you can check for it like this
contentWrapper.style.length === 0

answered Jan 19, 2021 at 10:42

Syknapse

1522 silver badges14 bronze badges

Comments

jozxyqk · Accepted Answer · 2014-05-05 17:57:22Z

1

I missed @plalx's comment the first time I scanned this page.

if (element.hasAttribute("style"))
{
    var styleText = element.getAttribute("style")
}

On a related note, regarding styles...

//to get info about the end results of CSS
var computedStyle = element.currentStyle || getComputedStyle(element, null);

and

//to iterate over css styles from style tags or linked CSS
for i ...
    document.styleSheets[i].rules ...

//great for searching with
var elements = document.querySelectorAll(rules[i].selectorText);

answered May 5, 2014 at 17:57

jozxyqk

17.7k16 gold badges99 silver badges202 bronze badges

Comments

Sreejith N · Accepted Answer · 2021-01-28 05:54:30Z

1

To check style attribute exist or not for given Id

if(document.getElementById("idname").hasAttribute("style")){
  alert("Style attribute found");
}else{
  alert("Style attribute not found");
}

answered Jan 28, 2021 at 5:54

Sreejith N

417 bronze badges

Collectives™ on Stack Overflow

How to check if HTML style attribute exists with javascript

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related