Что это значит в HTML 5, когда атрибут является логическим атрибутом? - PullRequest
50 голосов
/ 10 ноября 2010

Что это означает, когда такой атрибут, как скрытый атрибут, является логическим атрибутом?Может кто-нибудь объяснить это с точки зрения непрофессионала?

Ответы [ 5 ]

95 голосов
/ 10 ноября 2010

Как уже говорилось, логические атрибуты - это атрибуты, которые оцениваются как true или false.

Однако из HTML5 Spec - http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes

2.5.2 Булевы атрибуты

Ряд атрибутов являются логическими атрибутами. Наличие логический атрибут элемента представляет собой истинное значение, а Отсутствие атрибута представляет ложное значение.

Если атрибут присутствует, его значение должно быть либо пустой строкой или значение, которое является ASCII регистронезависимое совпадение для каноническое имя атрибута, без начальные или конечные пробелы.

Значения "true" и "false" недопустимы для логических атрибутов. к представляют ложное значение, атрибут должен быть полностью опущен.

Обратите внимание, что это означает, что <div hidden="true"> это , а не , разрешенный в HTML5.

Правильный будет либо <div hidden>, либо <div hidden="">, либо <div hidden="hidden">, либо без учета регистра, а также одиночные кавычки / варианты без кавычек любого из них.

36 голосов
/ 10 ноября 2010

2.5.2 Логические атрибуты

Ряд атрибутов - логические атрибуты.Наличие логического атрибута в элементе представляет истинное значение, а отсутствие атрибута представляет ложное значение.

Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое являетсясопоставление ASCII без учета регистра для канонического имени атрибута без пробелов в начале или в конце.

Значения «true» и «false» недопустимы для логических атрибутов.Чтобы представить ложное значение, атрибут должен быть вообще опущен.

3 голосов
/ 18 декабря 2017

Как уже говорили другие, логический имеет три возможных синтаксиса для true :

<textarea readonly></textarea>
<textarea readonly=""></textarea>
<textarea readonly="readonly"></textarea>

И один для false :

<textarea></textarea>

Кроме того, что у вас есть несколько подобных исключений, очевидно:

проверка орфографии [HTML5]

Установка значения этого атрибута в значение true означает, что элемент должен проверить свою орфографию и грамматику. Значение default указывает, что элемент должен действовать в соответствии с поведением по умолчанию, возможно, основываясь на собственном значении проверки орфографии родительского элемента. Значение false указывает, что элемент не должен проверяться.

0 голосов
/ 15 марта 2019

2.4.2.Логические атрибуты

Ряд атрибутов является логическими атрибутами.Наличие логического атрибута в элементе представляет истинное значение, а отсутствие атрибута представляет ложное значение.

Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое являетсяASCII-регистронезависимое совпадение для канонического имени атрибута без начального или конечного пробела.Значения «true» и «false» недопустимы для логических атрибутов.Чтобы представить ложное значение, атрибут должен быть вообще опущен.

Пример: Здесь приведен пример флажка, который установлен и отключен.Проверенные и отключенные атрибуты являются логическими атрибутами.

<label><input type=checkbox checked name=cheese disabled> Cheese</label>

Это может быть эквивалентно записано так:

<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>

Вы также можете смешивать стили;следующее по-прежнему эквивалентно:

<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

проверьте этот пост Логические атрибуты HTML это также может вам помочь.

0 голосов
/ 15 марта 2019

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...