Я хочу проверить, существует ли атрибут данных HTML5, используя простой javascript. Я пробовал приведенный ниже фрагмент кода, но он не работает.
if(object.getAttribute("data-params")==="undefined") {
//data-attribute doesn't exist
}
Я хочу проверить, существует ли атрибут данных HTML5, используя простой javascript. Я пробовал приведенный ниже фрагмент кода, но он не работает.
if(object.getAttribute("data-params")==="undefined") {
//data-attribute doesn't exist
}
Element.getAttribute
возвращает null
или пустую строку, если атрибут не существует.
Вы использовали бы Element.hasAttribute
:
if (!object.hasAttribute("data-params")) {
// data attribute doesn't exist
}
или Element.dataset
(см. также: in
operator):
if (!("params" in object.dataset)) {
// data attribute doesn't exist
}
или даже
if (!object.getAttribute("data-params")) {
// data attribute doesn't exist or is empty
}
Проверка на null также дала решение.
if (object.getAttribute("data-params") === null) {
//data attribute doesn't exist
}else{
//data attribute exists
}
Код, который вы опубликовали, не будет работать так, как вы ожидаете, то, что вы здесь делаете, проверяет, равно ли значение атрибута именованного атрибута ("data-params"
) "undefined"
, которое вернется true
, только если атрибут data-params="undefined"
.
if (object.getAttribute("data-params") === "undefined") {
// the "data-params" attribute-value is exactly "undefined"
// note that `getAttribute()` is a
}
Я подозреваю, что вы хотите:
var typeOfObjectAttribute = typeof object.getAttribute("data-params");
if (typeOfObjectAttribute === null || typeOfObjectAttribute === "") {
// data-params attribute doesn't exist on that Node.
}
Обратите внимание, что – в соответствии с Mozilla Developer Network (ссылка для Element.getAttribute()
, ниже) – утверждает, что:
getAttribute()
возвращает значение указанного атрибута для элемента. Если данный атрибут не существует, возвращаемое значение будет либоnull
, либо""
(пустая строка) & hellip;
Также стоит отметить, что getAttribute()
- это метод узлов Element, а не общих объектов.
Кстати, вы также можете использовать следующий подход (опять же, тестирование того, что атрибут не установлен):
// here we look to see if the 'params' key is present in the
// HTMLElement.dataset object of the element, and then invert
// that result using the '!' operator, to check that the
// attribute *isn't* present:
if (!('params' in document.getElementById('elementID').dataset)) {
// the data-params attribute is not present.
}
Литература:
Вы могли бы просто использовать API-интерфейс набора данных.
Свойство HTMLElement.dataset для чтения позволяет получить доступ как в режиме чтения, так и записи ко всем атрибутам пользовательских данных (data- *), установленным в элементе. Это карта DOMString, одна запись для каждого пользовательского атрибута данных.
К сожалению, это не сработает в IE10, но я уверен, что там есть прокладка.
Вот пример
var containerData = document.querySelector('#container').dataset,
contentData = document.querySelector('#content').dataset;
// Check if dataset is empty or not.
console.log(Object.keys(containerData).length === 0);
console.log(Object.keys(contentData).length === 0);
// Check for specific data
if (containerData.hasOwnProperty('bar')) {
console.log(containerData.bar);
}
// Here is the dataset
console.log(containerData);
<div id="container" data-foo="bar" data-bar="foo">
<div id="content">
Content
</div>
</div>
Попробуйте использовать typeof:
if(typeof object.getAttribute("data-params") === "undefined") {
console.log('data-attribute doesn't exist');
}
Вы можете сделать только проверку значения фальшивости
if(!object.getAttribute("data-params")) {
//data-attribute doesn't exist
}
cause getAttribute
может возвращать пустую или пустую строку
также вы можете использовать object.hasAttribute("data-params")
только для проверки наличия атрибута
Единственное, что сработало для меня, было это.
if(typeof object.dataset.sheet === "undefined") {
console.log('Data attribute does not exist');
}
Еще проще:
if (object.dataset.sheet !== undefined) {
// the "data-sheet" attribute exists
}
Чтобы увидеть, имеет ли данный элемент HTML5 определенный пользовательский атрибут HTML5 data-*
, просто изучите элемент dataset
.
dataset
является DOMStringMap
объектом, поэтому вы можете использовать метод hasOwnProperty()
:
if (element.dataset.hasOwnProperty('params')) {
[... CODE HERE...]
}