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
}
“(” –> “)”
if (elementSupportsAttribute("textarea", "placeholder")) {
} else {
// fallback
}
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?
@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.
I’ve tried another test case and it doesn’t seem to work:
element = “form”
attribute = “novalidate”
result: false
Browser: Chrome 23 on OSX
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.
Disregard my last comment. Had to pass in ‘maxLength’ instead of ‘maxlength’ and it worked as advertised.
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;
}
The function can be simplified as follows:
The
!!(not not) effectively coalesces a truthy value into a real boolean.Mark Simon, the
inoperator already returns a “real” boolean (true/false), so no need to “coalesce” (I think you mean “coerce”) it into one.@Benjamin The original code checks for <element> attributes.
Your change allows the code to check for CSS styles. You should rename it to something like
elementSupportsStyle.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: https://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.
You should remove the element after you ran the test. Right now, you are polluting your DOM.
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;
}
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