>JavaScript中获取和修改元素属性的值
2023-03-07 09:50:42 时间
今天记录两个函数可以用来获取和修改获取的元素对象的属性的值。
getAttribute()函数方法
getAttribute()是一个函数,并且它只有一个参数值,这个参数值就是你所要查询的元素对象的名字,比如元素的“title”属性等。
注意:getAttribute()不属于document(文档)对象函数方法,它只能通过元素节点对象函数调用,
比如
复制
getELementById()
getElementsByTagName()
getElementsByClassName()
语法:
复制
el.getAttribute(name);
//name:必须,元素的属性的名字
类似语法:
复制
getElementById.getAttribute("title");
例子:
获取文档中的ID属性为“li1”的列表项的“title”属性的值
HTML代码:
复制
<ul>
<li id="li1" title="feiniaomy"></li>
<li></li>
</ul>
JS代码:
复制
var mochuid = document.getElementById("li1"); //获取ID为"li1"的元素对象
var mochutitle = mochuid.getAttribute("title"); //获取mochuid中的title属性的值
alert(mochutitle);//输出“title”的值
结果输出:feiniaomy
setAttirbute()函数方法
javascript中给我们提供了一个可以改变元素对象的属性的值的函数方法--setAttirbute(),它的写法和上面那个的函数写法有点想似,但一定得区分开。
setAttribute()函数与getAttribute()函数一样,只能用于元素节点对象,但是不同的是它可以改变元素节点对象的属性的值,并且它带有两个参数。
语法:
复制
el.setAttribute(name1,name2);
// name1:必须,要设置的属性名
// name2:必须,要设置的属性值
类似语法:
复制
getElementById.setAttribute("title","mochu");
例子:
获取文档中的ID属性为“li1”的列表项的“title”属性的值,并把“title”的值改为"mochu"
HTML代码:
复制
<ul>
<li id="li1" title="feiniaomy"></li>
<li></li>
</ul>
JS代码:
复制
var mochuid = document.getElementById("li1"); //获取ID为"li1"的元素对象
var mochutitle = mochuid.getAttribute("title"); //获取mochuid中的title属性的值,可省略
alert(mochutitle);//输出未改变前的值
var mochusettitle = mochuid.setAttribute("title","mochu");//改变属性的值
alert(mochusettitle);//输出改变之后的值
结果会输出:mochu
注意:如果setAttribute()方法的的第一个参数中的属性名称在元素节点对象中没有,那么就会先创建其属性而后赋值。
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的