Grow your CSS skills. Land your dream job.

Last updated on:

Test if Element Supports Attribute

Not all browsers support all attributes on all elements. There are a number of new attributes in HTML5, so the idea of testing to see what kind of browser environment you are in becomes every increasingly important.

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

Usage

if (elementSupportsAttribute("textarea", "placeholder") {

} else {
   // fallback
}

Comments

  1. Permalink to comment#

    “(” –> “)”


    if (elementSupportsAttribute("textarea", "placeholder")) {

    } else {
    // fallback
    }

  2. Michael
    Permalink to comment#

    This doesn’t seem to work. I took your function and gave it “text” and “value” as arguments in FireFox 9.0.1 and it returned “false”. I like how simple and elegant the snippet is, but I just can’t get it to work. Does anyone know what’s going on with it?

  3. Dimitar Bonev
    Permalink to comment#

    @Michael

    There is no “text” element, but there is “input” element which type is “text”. This snippet tests for attribute in an element and not for attribute alongside another attribute in an element.

  4. Vitaly
    Permalink to comment#

    I’ve tried another test case and it doesn’t seem to work:

    element = “form”
    attribute = “novalidate”
    result: false

    Browser: Chrome 23 on OSX

  5. Cory
    Permalink to comment#

    Doesn’t work. If IE sees that the attribute has been set, it will return true, despite the fact that it isn’t actually supported. Tested using a textarea and the maxlength attribute.

  6. Cory
    Permalink to comment#

    Disregard my last comment. Had to pass in ‘maxLength’ instead of ‘maxlength’ and it worked as advertised.

  7. I had to append “.style” to the created element before it would work (Chrome 26, OSX).

    function elementSupportsAttribute(element, attribute) {
    var test = document.createElement(element).style;
    if (attribute in test) {
    return true;
    } else {
    return false;
    }
    };

    I also adjusted the code above to take in multiple attribute names, delimited by “|”:

    function elementSupportsAttribute(element, attribute) {
    var result = false;
    var test = document.createElement(element).style;
    var attributes = attribute.split(“|”);
    var numAttributes = attributes.length;
    for (var i = 0; i < numAttributes; ++i) {
    if (attributes[i] in test) {
    result = true;
    break;
    }
    }
    return result;
    }

  8. The function can be simplified as follows:

    function elementSupportsAttribute(element, attribute) {
        return !!(attribute in document.createElement(element));
    };
    

    The !! (not not) effectively coalesces a truthy value into a real boolean.

  9. CJ Dennis
    Permalink to comment#

    @Benjamin The original code checks for <element> attributes.

    elementSupportsAttribute('div', 'style') == true
    

    Your change allows the code to check for CSS styles. You should rename it to something like elementSupportsStyle.

    elementSupportsStyle('div', 'marginTop') == true
    
  10. Joe T
    Permalink to comment#

    The article’s title is misleading and the article itself doesn’t clarify: the script actually tests DOM properties of an element, not the attributes. The hint was Cory’s comment: http://css-tricks.com/snippets/javascript/test-if-element-supports-attribute/#comment-256993

    Things like “value”, “maxlength”, etc. have DOM property equivalents, but they’re typically camel-cased (thus ‘maxlength’ was false while ‘maxLength’ was true). Make sure you’re using the DOM property name & casing, not necessarily all-lower attribute casing.

    Attributes are used to SET properties when the DOM registers the element, and only exist in the element.attributes array if they’re written directly into the element’s tag (element.setAttribute() accomplishes this as well). Unless you’re IE7 and you do things wrong.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".