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. User Avatar
    aytac
    Permalink to comment#

    “(” –> “)”


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

    } else {
    // fallback
    }

  2. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Cory
    Permalink to comment#

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

  7. User Avatar
    Benjamin
    Permalink to comment#

    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. User Avatar
    Mark Simon

    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. User Avatar
    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. User Avatar
    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.

  11. User Avatar
    Yves
    Permalink to comment#

    You should remove the element after you ran the test. Right now, you are polluting your DOM.

  12. User Avatar
    Brendon Conradie
    Permalink to comment#

    Works fine for attributes, if you are looking to test styles then you could augment it further if you like or create a different function or use modernizr and so on and so on. Modified the above function and added some parameter checking for dev friendliness :)

    function elementSupportsAttribute(element, attribute) {
    if (!element || !attribute) throw Error(‘Error in passing arguments’);
    var test = document.createElement(element);
    return attribute in test;
    }

  13. User Avatar
    Puddingsan
    Permalink to comment#

    As anyone reading this thread may have gathered, a simple solution to checking elements against attributes does not exist.
    However, I have spent a considerable amount of time compiling this programme that also notes deprecated, obsolete, vendor-specific, non-standard and other attributes found in the element.

    I hope somebody out there finds this useful :-)

    Puddingsan

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag