1.1 数据属性(`properties`),对象的普通属性将字符串名称映射到值。例如,下面对象obj有一个数据属性,名称为 prop,对应的值为 123:var obj = {prop: 123}可以用以下方式读取属性的值:console.log(obj.prop)// 123,console.log(obj["prop"])// 123,当然也可以用以下方式来设置属性的值:obj.prop = "abc"obj["prop"] = "abc"
1.2 访问器属性,另外,可以通过函数处理获取和设置属性值。 这些函数称为访问器函数。 处理获取的函数称为getter。 处理设置的函数称为setter:var obj = {get prop () {return 'Getter'},set prop (value) {console.log('Setter: ' + value)}}访问 obj 属性:>obj.prop'Getter'>obj.prop = 123Setter: 123。
1.3 内部属性一些属性只是用于规范,这些属于“内部”的属性,因为它们不能直接访问,但是它们确实影响对象的行为。内部属性有特殊的名称都写在两个方括号,如:凯闷内部属性[[Prototype]]指向对象的原型。它可以通过Object.getPrototypeOf()读取。它的值只能通过创建具有给定原型的新对象来设置,例如盯档弯通过object.create()或__proto__ 。
内部属性[[Extensible]]决定是否可以向对象添加属性。可以通过Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。可以通过Object.preventExtensions()方法让一个对象变的不可扩展,也就是永远不能再添加新的属性。
属性特性(attribute),属性的所有状态,包括数据和元数据,都存储在特性(attribute)中。它们是属蠢野性具有的字段,就像对象具有属性一样。特性(attribute)键通常用双括号编写:
给你一个简单的原生html5实现的例子吧。没有使用jquery。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li {
禅腔 display: inline-block
width: 100%
消则 height: 30px
拿袭棚line-height: 30px
}
li:active, li:focus, .li-active {
background: #dddddd
color: red
}
</style>
<script type="text/javascript">
onload = function () {
function removeActiveClass(node) {
node.className = ''
}
document.querySelector('ul[id=test]').onclick = function (e) {
Array.prototype.forEach.call(document.querySelectorAll('ul[id=test] > li'), removeActiveClass)
var target = e.target
target.className = 'li-active'
}
}
</script>
</head>
<body>
<ul id="test">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
添加属性用setAttribute()方法,可以传入两个参数,第一个是属性名肆脊称,第二个是要设置的属性值
var li = document.getElementsByTagName('li')[0]//设置 御改li 属性,如 data-falg,设置为镇雹判true
li.setAttribute("data-falg", "true")
也可以获取属性用getAttribute(),传入一个参数,是想获取的属性名称,返回的是该属性的值
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)