web前端全系列 教程
1839个小节阅读:2242.8k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
HTML 元素包括标签名和若干个键值对,这个键值对就称为“属性”(attribute)
元素节点提供四个方法,用来操作属性
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
Element.getAttribute
方法返回当前元素节点的指定属性。如果指定属性不存在,则返回null
xxxxxxxxxx
// HTML代码为
// <div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "left"
Element.setAttribute
方法用于为当前元素节点新增属性。如果同名属性已存在,则相当于编辑已存在的属性
xxxxxxxxxx
var d = document.getElementById('d1');
d.setAttribute('align', 'center');
下面是对img
元素的src
属性赋值的例子
xxxxxxxxxx
var myImage = document.querySelector('img');
myImage.setAttribute('src', 'images/girl.png');
Element.hasAttribute
方法返回一个布尔值,表示当前元素节点是否包含指定属性
xxxxxxxxxx
var d = document.getElementById('box');
if (d.hasAttribute('align')) {
d.setAttribute('align', 'center');
}
Element.removeAttribute
方法用于从当前元素节点移除属性
xxxxxxxxxx
// HTML 代码为
// <div id="box" align="left" width="200px">
document.getElementById('box').removeAttribute('align');
// 现在的HTML代码为
// <div id="box" width="200px">
有时,需要在HTML元素上附加数据,供 JavaScript 脚本使用。一种解决方法是自定义属性
使用标准提供的data-*
属性
xxxxxxxxxx
<div id="box" data-itbaizhan="itbaizhan">
然后,使用元素节点对象的dataset
属性,它指向一个对象,可以用来操作 HTML 元素标签的data-*
属性
xxxxxxxxxx
var n = document.getElementById('box');
n.dataset.itbaizhan // itbaizhan
n.dataset.itbaizhan = 'itbaizhan'
实时效果反馈
1. 下列关于自定义属性,属于JavaScript标准的写法是:
A attr-*
B data-*
C setAttr-*
D getAttr-*
答案
1=>B