Nicht alle Browser unterstützen alle Attribute für alle Elemente. Es gibt eine Reihe neuer Attribute in HTML5, daher wird die Idee, zu testen, in welcher Art von Browserumgebung man sich befindet, immer wichtiger.
function elementSupportsAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
};Verwendung
if (elementSupportsAttribute("textarea", "placeholder") {
} else {
// fallback
}
„“ –> „“
if (elementSupportsAttribute("textarea", "placeholder")) {
} else {
// Fallback
}
Das scheint nicht zu funktionieren. Ich habe Ihre Funktion genommen und ihr „text“ und „value“ als Argumente in FireFox 9.0.1 übergeben und es gab „false“ zurück. Ich mag, wie einfach und elegant der Schnipsel ist, aber ich kann ihn einfach nicht zum Laufen bringen. Weiß jemand, was damit los ist?
@Michael
Es gibt kein „text“-Element, aber es gibt ein „input“-Element, dessen Typ „text“ ist. Dieser Schnipsel prüft auf Attribute in einem Element und nicht auf Attribute zusammen mit anderen Attributen in einem Element.
Ich habe einen weiteren Testfall ausprobiert und er scheint nicht zu funktionieren
element = „form“
attribut = „novalidate“
ergebnis: false
Browser: Chrome 23 unter OSX
Funktioniert nicht. Wenn IE sieht, dass das Attribut gesetzt wurde, gibt es true zurück, obwohl es tatsächlich nicht unterstützt wird. Getestet mit einem textarea und dem maxlength-Attribut.
Mein letzter Kommentar ist ungültig. Ich musste ‚maxLength‘ anstelle von ‚maxlength‘ übergeben und es funktionierte wie beworben.
Ich musste „.style“ an das erstellte Element anhängen, bevor es funktionierte (Chrome 26, OSX).
function elementSupportsAttribute(element, attribute) {
var test = document.createElement(element).style;
if (attribute in test) {
return true;
} else {
return false;
}
};
Ich habe auch den obigen Code angepasst, um mehrere Attributnamen aufzunehmen, getrennt durch „|“
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;
}
Die Funktion kann wie folgt vereinfacht werden
Die
!!(nicht nicht) aggregiert effektiv einen wahrheitsgemäßen Wert in einen echten booleschen Wert.@Benjamin Der ursprüngliche Code prüft auf Attribute von <element>.
Ihre Änderung ermöglicht es dem Code, auf CSS-Stile zu prüfen. Sie sollten ihn in etwas wie
elementSupportsStyleumbenennen.Der Titel des Artikels ist irreführend und der Artikel selbst klärt nicht: Das Skript testet tatsächlich DOM-Eigenschaften eines Elements und nicht die Attribute. Der Hinweis war Corys Kommentar: https://css-tricks.de/snippets/javascript/test-if-element-supports-attribute/#comment-256993
Dinge wie „value“, „maxlength“ usw. haben DOM-Eigenschafts-Äquivalente, aber sie sind typischerweise camel-case (daher war ‚maxlength‘ falsch, während ‚maxLength‘ wahr war). Stellen Sie sicher, dass Sie den Namen und die Groß-/Kleinschreibung der DOM-Eigenschaft verwenden, nicht unbedingt die reine Kleinbuchstaben-Attributschreibung.
Attribute werden verwendet, um Eigenschaften festzulegen, wenn das DOM das Element registriert, und existieren nur im Element.attributes-Array, wenn sie direkt in das Tag des Elements geschrieben werden (element.setAttribute() erledigt das ebenfalls). Außer wenn Sie IE7 sind und Dinge falsch machen.
Sie sollten das Element entfernen, nachdem Sie den Test ausgeführt haben. Im Moment verschmutzen Sie Ihr DOM.
Funktioniert gut für Attribute. Wenn Sie Stile testen möchten, können Sie es weiter erweitern, wenn Sie möchten, oder eine andere Funktion erstellen oder Modernizr usw. usw. verwenden. Habe die obige Funktion modifiziert und einige Parameterprüfungen für Entwicklerfreundlichkeit hinzugefügt :)
function elementSupportsAttribute(element, attribute) {
if (!element || !attribute) throw Error(‘Fehler bei der Übergabe von Argumenten’);
var test = document.createElement(element);
return attribute in test;
}
Wie jeder, der diesen Thread liest, vielleicht mitbekommen hat, gibt es keine einfache Lösung, um Elemente gegen Attribute zu prüfen.
Ich habe jedoch eine beträchtliche Menge Zeit damit verbracht, dieses Programm zusammenzustellen, das auch veraltete, obskure, herstellerspezifische, nicht standardmäßige und andere Attribute aufführt, die im Element gefunden werden.
Ich hoffe, dass das jemand da draußen nützlich findet :-)
Puddingsan