自定义属性操作
时间:2022-07-28
本文章向大家介绍自定义属性操作,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.自定义属性操作
1.1 获取属性值
element.属性 获取属性值。 element.getAttribute('属性');
区别: element.属性 获取内置属性值(元素本身自带的属性) element.getAttribute(‘属性’); 主要获得自定义的属性 (标准) 我们程序员自定义的属性
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
// 1. 获取元素的属性值
// (1) element.属性
console.log(div.id);
//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>
1.2. 设置属性值
element.属性 = ‘值’ 设置内置属性值。 element.setAttribute('属性', '值'); 区别: element.属性 设置内置属性值 element.setAttribute(‘属性’); 主要设置自定义的属性 (标准)
// 2. 设置元素属性值
// (1) element.属性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是
1.3. 移出属性
element.removeAttribute('属性');
/ class 不是className
// 3 移除属性 removeAttribute(属性)
div.removeAttribute('index');
1.4. H5自定义属性
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:
1. 设置H5自定义属性 H5规定自定义属性data-开头做为属性名并且赋值。 比如 <div data-index=“1”></div> 或者使用 JS 设置 element.setAttribute(‘data-index’, 2)
2. 获取H5自定义属性 1. 兼容性获取 element.getAttribute(‘data-index’); 2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 特征锦囊:一文介绍特征工程里的卡方分箱,附代码实现
- C++11知识点总结(全面解析C++11经常考到的知识点)
- C++特殊类设计+类型转换
- STL之空间配置器
- C++之STL标准模板库——从入门到精通
- unorder(哈希-海量数据处理)
- 面试题:简单实现一个shared_ptr智能指针
- C++中priority_queue优先队列
- 腾讯2019秋招笔试真题
- 【leetcode】43.1~n整数中1出现的次数
- 验证回文字符串II
- 想知道HTML语法结构?看这一篇就够了(超全解析html语法)
- 一文了解CSS样式表结构
- Java Script脚本语言入门(上)
- JavaScript脚本语言入门(下)