A.Основано на комментарии Bob.at.Indigo.Health:
С некоторым html-атрибутом, который должен представлять логическое значение (например, атрибут checked
для флажка) ... единственный способ установить его false
означает пропустить атрибут ,:
<input type="checkbox" />
Все остальные назначения будут интерпретироваться как true
(даже если это не соответствует стандарту html),например,
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked=undefined />
<input type="checkbox" checked=null/>
<input type="checkbox" checked=false/>
<input type="checkbox" checked="false"/>
<input type="checkbox" checked=""/>
<input type="checkbox" checked="foo"/>
http://jsfiddle.net/hgq4ewr1/
B.Некоторые библиотеки JavaScript могут определять специальные значения, которые также интерпретируются как false.
С помощью d3.js вы можете, например, удалить атрибуты («установите их в false»), вызвав attr
функция с null
:
d3Selection.attr('checked', null);
Метод getAttribute метода HTMLElement возвращает null
или ''
, если атрибут не существует.
См. Также:
C.Если вы наследуете от HTMLElement
в JavaScript , вы можете определить пользовательские атрибуты другого типа, чем String.См. Также https://www.webcomponents.org/introduction
Однако я бы назвал эти атрибуты JavaScript, а не атрибуты HTML, например:
<html>
<head>
<script>
class TreezElement extends HTMLElement {
static get observedAttributes() {
return ['value'];
}
get valueProperty() {
var stringValue = this.getAttribute('value')
return this.convertFromStringValue(stringValue);
}
set valueProperty(newValue) {
var stringValue = this.convertToStringValue(stringValue)
if(stringValue === null){
this.removeAttribute('value');
} else {
this.setAttribute('value', stringValue);
}
}
constructor(){
super();
}
//should be overridden by inheriting class
convertFromStringValue(stringValue){
return stringValue;
}
//should be overridden by inheriting class
//return null if the value attribute should be removed
//(="set to false")
convertToStringValue(value){
return value;
}
updateElements(newValue){
//should be implemented by inheriting class
}
attributeChangedCallback(attr, oldValue, newValue) {
if(attr==='value'){
if(newValue!==oldValue){
this.updateElements(newValue);
this.__dispatchInputEvent();
}
}
}
}
</script>
</head>
</html>