boolean attribute(布尔值属性)

boolean attribute     HTML - Why boolean attributes do not have boolean value?     Boolean HTML Attributes   HTML Boolean Attributes

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.(html标签上这个tag出现就代表是true没有这个tag就是false,与这个tag的具体的值没有关系)

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

setAttribute("selected", false)  will not word. null, empty string or undefined don't work either

布尔值属性的添加与删除,需要用到setAttribute()和removeAttribute()

Some attributes play the role of boolean variables (e.g., the selected attribute for the OPTION element). Their appearance in the start tag of an element implies that the value of the attribute is "true". Their absence implies a value of "false".

Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").

This example defines the selected attribute to be a boolean attribute.

selected     (selected)  #IMPLIED  -- option is pre-selected --

The attribute is set to "true" by appearing in the element's start tag:

<OPTION selected="selected">
...contents...
</OPTION>

In HTML, boolean attributes may appear in minimized form -- the attribute's value appears alone in the element's start tag. Thus, selected may be set by writing:

<OPTION selected>

instead of:

<OPTION selected="selected">

Authors should be aware that many user agents only recognize the minimized form of boolean attributes and not the full form.

attribute vs  property

HTML - attributes vs properties [duplicate]

Attributes are defined by HTML. Properties are defined by DOM.(attributes属于html范畴,property属于dom范畴)

Some HTML attributes have 1:1 mapping onto properties. id is one example of such.

Some do not (e.g. the value attribute specifies the initial value of an input, but the value property specifies the current value).

JavaScript: What's the difference between HTML attribute and DOM property?

It is easy to confuse attribute with property when manipulating DOM object by  JavaScript. document.getElementById('test').getAttribute('id')$('#test').attr('id')document.getElementById('test').id and $('#test').prop('id') return the same id: "test". In this article, I will explain the differences between attribute and property.

Attribute

  1. Attributes are defined by HTML, all definitions inside HTML tag are attributes.

    <div id="test" class="button" custom-attr="1"></div>
    document.getElementById('test').attributes;
    // return: [custom-attr="hello", class="button", id="test"]
  2. The type of attributes is always string. For the DIV above, document.getElementById('test').getAttribute('custom-attr') or $('#test').attr('custom-attr') returns string: "1".

Property

  1. Properties belong to DOM, the nature of DOM is an object in JavaScript(DOM本质上来讲可以当做js中的普通对象来对待). We can get and set properties as we do to a normal object in JavaScript and properties can be any types.

    document.getElementById('test').foo = 1; // set property: foo to a number: 1
    document.getElementById('test').foo; // get property, return number: 1
    $('#test').prop('foo'); // read property using jQuery, return number: 1
    $('#test').prop('foo', {
    age: 23,
    name: 'John'
    }); // set property foo to an object using jQuery
    document.getElementById('test').foo.age; // return number: 23
    document.getElementById('test').foo.name; // return string: "John"
  2. Non-custom attributes have 1:1 mapping onto properties(非自定义的attribute, 在property都会一一对应), like: id, class, title, etc.

    <div id="test" class="button" foo="1"></div>
    document.getElementById('test').id; // return string: "test"
    document.getElementById('test').className; // return string: "button"
    document.getElementById('test').foo; // return undefined as foo is a custom attribute

    Notice: We need to use "className" when get and set "class" by property because "class" is a JavaScript reserved word.

  3. Non-custom propertiy (attribute) changes when corresponding attribute (property) changes in most cases(大多数情况下,proerty和attribute是相对应的变化).

    <div id="test" class="button"></div>
    var div = document.getElementById('test');
    div.className = 'red-input';
    div.getAttribute('class'); // return string: "red-input"
    div.setAttribute('class','green-input');
    div.className; // return string: "green-input"
  4. Attribute which has a default value doesn't change when corresponding property changes(但是attribute有默认值的并不会随着property变化).

    <input id="search" value="foo" />
    var input = document.getElementById('search');
    input.value = 'foo2';
    input.getAttribute('value'); // return string: "foo"

Best Practice

推荐使用dom的property,不使用html的attribute

It is recommended to use property in JavaScript as it's much easier and faster. Especially for boolean type attributes like: "checked", "disabled" and "selected", browser automatically converts them into boolean type properties.

<input id="test" class="blue" type="radio" />

Good practice

// get id
document.getElementById('test').id;
// set class
document.getElementById('test').className = 'red';
// get and set radio control status
document.getElementById('test').checked;
document.getElementById('test').checked = true;
$('#test').prop('checked');
$('#test').prop('checked', true);

Bad practice

// get id
document.getElementById('test').getAttribute('id');
// set class
document.getElementById('test').setAttribute('class', 'red');

boolean attribute(布尔值属性) attribute vs property的更多相关文章

  1. Android应用资源--之属性(Attribute)资源

    原文链接: http://wujiandong.iteye.com/blog/1184921 属性(Attribute)资源:属于整个Android应用资源的一部分.其实就是网上一堆介绍怎么给自定义V ...

  2. java 学习第二篇关系运算符和布尔值

    关系运算符,顾名思义.用来看什么关系.(也就是用来比较) 看下表 JAVA 关系运算符 a=6,b=5 关系运算符 举例 值 解释 > a>b true a大于b < a<b ...

  3. Objective-C中属性及其特质@property、attribute

    属性: 属性@property和属性attribute不同,@property在OC里有自己的一套专对实例变量的处理机制.attribute我们可以特指属性所具有或遵循的特质. 使用属性,编译器就会自 ...

  4. JavaScript特性(attribute)、属性(property)和样式(style)

    最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...

  5. 区分元素特性attribute和对象属性property

    × 目录 [1]定义 [2]共有 [3]例外[4]特殊[5]自定义[6]混淆[7]总结 前面的话 其实attribute和property两个单词,翻译出来都是属性,但是<javascript高 ...

  6. js便签笔记(2)——DOM元素的特性(Attribute)和属性(Property)

    1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...

  7. 属性attribute和property的区别

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  8. C#属性(Attribute)用法实例解析

    属性(Attribute)是C#程序设计中非常重要的一个技术,应用范围广泛,用法灵活多变.本文就以实例形式分析了C#中属性的应用.具体入戏: 一.运用范围 程序集,模块,类型(类,结构,枚举,接口,委 ...

  9. C#教程之C#属性(Attribute)用法实例解析

    引用:https://www.xin3721.com/ArticlecSharp/c11686.html 属性(Attribute)是C#程序设计中非常重要的一个技术,应用范围广泛,用法灵活多变.本文 ...

随机推荐

  1. Python之路3Day

    3.python基础补充(集合,collection系列,深浅拷贝)   一.集合 1.集合(set): 把不同的元素组成一起形成集合,是python基本的数据类型.集合元素(set elements ...

  2. pipe----管道

    #include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <string.h&g ...

  3. 利用命令行来安装应用到android虚拟机

    1.首先将将android  sdk中的adb添加到环境变量中确保在任意目录下运行adb都可以执行 2.将命令行切换到应用安装包所在未知 3.运行:adb install 应用名称即可

  4. 微型orm框架--dapper的简单使用

    1.安装 首先使用nuget安装dapper,因为这里的示例是使用mysql,所以还要安装mysql的驱动.如下图: 2 数据库表 脚本 ; -- -------------------------- ...

  5. C#中yield关键字理解

    yield关键字之前用得较少,但是在做项目开发的过程中也遇到了,当时有点迷惑,就顺便研究学习了一下,以下是个人理解,不到之处欢迎拍砖!废话就到这,上代码: class Program { static ...

  6. 卸载jdk以及重新安装jdk

    新旧交替重复安装会混乱,个人解决办法是: 1. 用系统 control panel 中 uninstall 卸载java se development kit 和 java update. 2. 打开 ...

  7. 自动布局autolayout和sizeclass的使用

    一.关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的,不过事实并非如此. 我们知道,一款iOS应用,其主要UI组件是由一个个相对 ...

  8. linux下如何查询jdk安装路径

    1:echo $JAVA_HOME 使用$JAVA_HOME的话能定位JDK的安装路径的前提是配置了环境变量$JAVA_HOME,否则如下所示,根本定位不到JDK的安装路径 [root@localho ...

  9. 【C#】面试题整理

    1.C#中类是否支持多继承?请说明原因.答:不支持,需要用接口来实现多继承 2.我们都知道一个类可以有多个构造函数,并且C#会在我们创建类的时候默认的提供一个无参的构造函数,当我实现了另外一个有参数的 ...

  10. 切换self.window.rootViewController根视图,导致上一视图控制器不能释放销毁的问题

    在我们APP开发中经常有首次进入应用先进入引导页或者登陆页的情况,类似下图所示      发现登陆以后更改window.rootViewController为应用首页时,登陆页没有销毁掉,通过图层工具 ...