boolean attribute(布尔值属性) attribute vs property
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
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"]
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
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"
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.
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"
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的更多相关文章
- Android应用资源--之属性(Attribute)资源
原文链接: http://wujiandong.iteye.com/blog/1184921 属性(Attribute)资源:属于整个Android应用资源的一部分.其实就是网上一堆介绍怎么给自定义V ...
- java 学习第二篇关系运算符和布尔值
关系运算符,顾名思义.用来看什么关系.(也就是用来比较) 看下表 JAVA 关系运算符 a=6,b=5 关系运算符 举例 值 解释 > a>b true a大于b < a<b ...
- Objective-C中属性及其特质@property、attribute
属性: 属性@property和属性attribute不同,@property在OC里有自己的一套专对实例变量的处理机制.attribute我们可以特指属性所具有或遵循的特质. 使用属性,编译器就会自 ...
- JavaScript特性(attribute)、属性(property)和样式(style)
最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...
- 区分元素特性attribute和对象属性property
× 目录 [1]定义 [2]共有 [3]例外[4]特殊[5]自定义[6]混淆[7]总结 前面的话 其实attribute和property两个单词,翻译出来都是属性,但是<javascript高 ...
- js便签笔记(2)——DOM元素的特性(Attribute)和属性(Property)
1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...
- 属性attribute和property的区别
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- C#属性(Attribute)用法实例解析
属性(Attribute)是C#程序设计中非常重要的一个技术,应用范围广泛,用法灵活多变.本文就以实例形式分析了C#中属性的应用.具体入戏: 一.运用范围 程序集,模块,类型(类,结构,枚举,接口,委 ...
- C#教程之C#属性(Attribute)用法实例解析
引用:https://www.xin3721.com/ArticlecSharp/c11686.html 属性(Attribute)是C#程序设计中非常重要的一个技术,应用范围广泛,用法灵活多变.本文 ...
随机推荐
- [置顶] Android Sensor系统剖析(4.0)(下)
Author:Harish_hu@qq.com 由于现在电脑上只有4.0的代码,考虑到代码差别也不大,所以下部分,就基于4.0来分析. 3:SensorManager 上一部分说过,开机后,syst ...
- linux下搭建svn本地服务器
在linux下搭建svn本地服务器可以很好的管理自己的代码,具体过程如下: # mkdir svn_local # cd svn_local # svnadmin create led_diplay ...
- redhat7.3配置163 yum源
redhat 的更新包只对注册的用户生效,所以我们需要自己手动更改成CentOS 的更新包,CentOS几乎和redhat是一样的,所以无需担心软件包是否可安装,安装之后是否有问题. 1.首先删除re ...
- TestNG中的DataProvider返回Iterator<Object[]>的妙用
TestNG中使用DataProvider有个好处,就是: 1. 在执行用例的时候dataProvider迭代中的每组数据都是作为一个用例执行 2. 在测试数据有规律的情况下,免去了添加testXML ...
- 实际开发中,后台回传的错误格式的Json数据处理
现在很多学习刚学习移动开发的同学,相信在培训机构,拿到后台数据的时候,格式都是正确的,甚至有的还是plist文件.但是实际开发中,我们获取数据都是通过网络接口从服务器获取数据,这些数据的格式都是后台写 ...
- Centos 7 意外断电如何处理
拔U盘的时候,不小心碰到了主机上的开机键-- 还好默认的响应动作是睡眠-- 还不知道 CentOS 怎么样应对意外断电呢?!
- find指令参数
1.name ~ 根目录 . 当前和子目录 name之后跟的是文件名 find . -name "[a-z]*[4-9].log" -print 2.perm perm后面跟的是权 ...
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat使用详解
Jmap是一个可以输出所有内存中对象的工具,甚至可以将VM 中的heap,以二进制输出成文本.打印出某个java进程(使用pid)内存内的,所有'对象'的情况(如:产生那些对象,及其数量). 使用方法 ...
- Windows 服务 Error 14001
如果碰到 windows 服务安装不了或者启动不了,报14001的配置文件错误,那么 可以从.exe.config入手,我这次遇到的是配置中有中文注释导致的. 我把空行以及中文的注释去掉以后,整个世界 ...
- [MFC美化] SkinMagic使用详解2- SkinMagic常用函数介绍
SkinMagic常用函数介绍 (1)InitSkinMagicLib函数:初始化SkinMagic int InitSkinMagicLib( //初始化SkinMagic工具库 HINSTANCE ...