关于HTML5的data-*自定义属性的总结
作者:monster1935 发布时间:2024-04-19 10:17:50
本文讲述了关于HTML5的data-*自定义属性。分享给大家供大家参考,具体如下:
一、关于html元素的特性
1.html元素都存在一些标准的特性:
id 元素在文档中的唯一标识符;
title 有关元素的附加说明信息,一般通过工具提示条显示出来;
lang 元素内容的语言代码,很少使用;
dir 语言的方向,很少使用;
className,与元素的class特性对应,考虑到与ECMAScript的保留字class的冲突,因此命名为className;
2.操作特性的方法:
getAttribute() 获取相关特性,也可以获取到自定义的特性,区别于使用DOM元素的属性获取;
setAttribute() 设置相关特性;
removeAttribute() 删除相关特性;
3.关于获取html元素特性中使用getAttribute()与直接使用DOM元素的属性获取的区别 :
例如:
var header=document.getElementById('header');console.log(header.id);//headerconsole.log(header.getAttribute('id'));//headerconsole.log(header.title);//testconsole.log(header.getAttribute('title'));//testconsole.log(header.myTitle);//undefinedconsole.log(header.getAttribute('myTitle'));//monster1935
在本文示例中演示了通过两种方法获取html元素的标准特性以及自定义特性。可以发现:
getAttribute()既可以访问标准特性也可以访问自定义特性,而是用DOM元素本身属性访问html元素特性的时候只能访问标准特性。
原因:
html元素中只有标准特性才会以属性的形式添加到DOM对象中。
特殊情况:
有两类特性,虽有在DOM对象中有对应的属性名,但是属性的值与通过getAttribute()返回的值并不相同。
1.style特性:
使用DOM对象属性访问style的时候,返回的是一个对象,而使用getAttribute()方法获取的时候返回的是css文本。
2.事件处理程序(例如:onclick):
使用DOM对象的属性访问的时候,返回的是一个JavaScript函数,而通过getAttribute()方法获取时返回的是javas代码。
使用方法:
只有在获取自定义特性的时候使用getAttribute()方法,操作DOM的时候,使用对象的属性来获取。
二、Html5中的自定义属性
1.Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息。
2.使用getAttribute()方法以及setAttribute()方法操作自定义属性。
例如:
var user=document.getElementById('user');//使用attributes方法操作属性//获取相关属性值var name=user.getAttribute('data-name');console.log(name)//monster1935var age = user.getAttribute('data-age');console.log(age);//123//设置相关属性值user.setAttribute('data-sex','male');console.log(user.getAttribute('data-sex'));//male上述示例中展示了使用getAttribute()以及setAttribute()方法操作html元素的自定义属性。
3.使用dataset操作自定义属性
例如:
var el=document.querySelector('#user');console.log(el.id);console.log(el.dataset); //返回的是一个DomStringMap对象console.log(el.dataset.name);console.log(el.dataset.age);// 设置相关属性el.dataset.home="shandong";console.log(el.dataset);// 删除相关属性// delete el.dataset.home;el.dataset.home = null;console.log(el.dataset);
以上示例展示了使用dataset属性来操作自定义属性。dataset属性的值是一个DOMStringMap的一个示例,是一个名值对的映射。在这个映射中,每个data-name的形式的属性都有一个对应的属性,不同的是属性名中没有data-前缀。(比如,自定义属性是data-name,映射中对应的属性就是name).还有一点需要注意的是如果data-属性名中包含了连字符(比如:data-date-of-birth),则映射中对应的属性为dateOfBirth,即转换为相应的驼峰格式来显示。
4.dataset属性的兼容性问题
Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+
5.使用data-属性选择器
1.获取相关DOM元素
var elem=document.querySelectorAll("[data-name='monster1935']");
2.设置相关css样式
<style> div{ width:100px; height:200px; margin:20px; } div[data-name="monster"]{ background-color: green; } div[data-name="monster1935"]{ background-color: red }</style>
来源:https://blog.csdn.net/a1247529789/article/details/51470005
猜你喜欢
- 推荐:Navicat for MySQL 15注册激活详细教程Navicat Premium 15 永久破解激活工具及安装教程(亲测可用)1
- 每天面对成堆的发票,无论是发票还是承兑单据,抑或是其他各类公司数据要从照片、PDF等不同格式的内容中提取,我们都有必要进行快速办公的能力提升
- Insus.NET解决这个问题,只有创建另外一个表,将存储用户决定要跟踪的表,以及这个表中需要跟踪的字段。 还要创建另外一个表[Audit]
- 循环用于重复执行一些程序块。从上一讲的选择结构,我们已经看到了如何用缩进来表示程序块的隶属关系。循环也会用到类似的写法。for循环for循环
- 和单选框一样,许多新手在用 Javascript 验证表单(form)中多选框(checkbox)的值时,都会遇到问题,原因是 checkb
- 前言功能新增学生显示学生查找学生删除学生存到文档创建入口函数在入口函数中,可以先打印一个菜单,用菜单来进行交互。def menu(): &n
- Python 是一门动态、面向对象语言。其最初就是作为一门面向对象语言设计的,并且在后期又加入了一些更高级的特性。除了语言本身的设计目的之外
- Django 中自带了 sitemap框架,用来生成 xml 文件Sitemap(站点地图)是通知搜索引擎页面的地址,页面的重要性,帮助站点
- 昨天在网上看到一个防采集软件,说采集只访问当前网页,不会访问网页的图片、JS等,今天突然想到,通过动态程序和Js访问分别记录访问者的IP,然
- 废话不多说,直接上代码吧!#python中,while语句用于循环执行程序,即在某个条件下,循环执行某段程序,以处理需要重复处理的相同任务。
- 我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。<div id="
- 1.用phpmyadmin创建数据库和数据表 创建数据库的时候,请将“整理”设置为:“utf8_general_ci” 或执行语句:CREA
- 对于使用虚拟主机的站长朋友,我们可能不知道该服务器是否安装了某种我们需要的组件。这时我们可以使用下面的代码来判断。该函数功能:检查是否存在系
- 目录前言1、字符串模板的参数2、格式控制符3、格式化操作符辅助符总结前言Python的%操作符可用于格式化字符串,控制字符串的呈现格式。使用
- 本文是小编日常收集整理些js经典实例,特此分享供大家参考!跨浏览器添加事件//跨浏览器添加事件function addEvent(obj,t
- 计算机一般来说是需要定期的清理,系统的内存不能无限延伸,同时有一些不需要的文件也可以得以清除掉。有些人会使用os.remove来进行文件的清
- 我就废话不多说了,大家还是直接看代码吧~package mainimport ("fmt""reflect&q
- 最近自己准备学习Python,之前也看了点基础知识。做图形这块需要用到OpenCV所以就需要配置环境,之前准备用的是Python3,后来发现
- python上传时,包含boundary时的处理方式 img_url = [] upload_pic_url = &
- 我们在数据处理,往往不小心,pandas会“主动”加上行和列的名称,我现在就遇到了这个问题。这个是pandas中to_csv生成的数据各种拼