首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么.getAttribute对data-*属性返回null

.getAttribute对data-属性返回null是因为data-属性并不是DOM元素的标准属性,而是自定义的数据属性。这些数据属性通常用于存储特定元素的相关数据,方便开发者在JavaScript中操作。

在HTML中,我们可以给元素添加data-属性,其中表示自定义的属性名。例如,我们可以给一个按钮元素添加data-color="red"属性,表示这个按钮的颜色是红色。

然而,使用.getAttribute方法去获取data-*属性的值时,会返回null。这是因为.getAttribute方法是基于HTML规范的,只能获取标准属性的值,而不包括自定义的数据属性。

要获取data-*属性的值,我们可以使用.dataset属性或直接通过元素对象访问属性。例如,对于上述的按钮元素,我们可以通过element.dataset.color或element.getAttribute('data-color')来获取其data-color属性的值。

关于腾讯云相关产品,可以参考腾讯云的云服务平台。链接地址:https://cloud.tencent.com/product

需要注意的是,上述内容仅供参考,实际情况可能因具体使用的技术和平台而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

feign接口返回泛型设置属性null问题

RequestHeader("token")String token); } 应用场景 1、序列化以及反序列化采用jackson 2、调用第三方采用feign注解式接口 问题分析 APIResultTO是一个api通用接口返回泛型类...为什么TenantOrg类中的Id等其他属性跟第三方服务返回的json数据字段完全一致,却没有成功设置对应的属性呢,这个就要看下BeanDeserializer类的deserializeFromObject...方法,从其名字上我们可以看出这是将请求返回的数据反序列化成对应的类对象: public Object deserializeFromObject(JsonParser p, DeserializationContext...= null); } return bean; } 具体如下图所示: 正如上面所示,用@JsonProperty注解配置的属性,在反序列化时就按照@JsonProperty...注解定义的属性名相同,至于为什么在TenantOrg中定义的PId属性在使用时怎么变成了pid,具体可以看下POJOPropertiesCollector类的_removeUnwantedProperties

2.4K20
  • Zepto这样操作元素属性

    当value参数为null,那么这个属性将被移除(类似removeAttr),多个属性可以通过对象键值的方式进行设置。...// 获取属性 (0 in this && this[0].nodeType == 1 && (result = this[0].getAttribute(name)) != null ?...紧接着再看当前选中的元素集合中第一个元素是否存在并且节点类型是否为element类型,如果是,再调用getAttribute获取name属性,结果不为null或者undefined的话直接返回,否则统一返回...data 读取或写入dom的 data-* 属性。行为有点像 attr ,但是属性名称前面加上 data-。...deserializeValue(data) : undefined }, data方法源码分为三个部分 将传入的name属性转化为data-开头的连字符 通过attr方法设置或者获取属性 attr方法的返回值再做一层映射处理

    78310

    Zepto这样操作元素属性

    当value参数为null,那么这个属性将被移除(类似removeAttr),多个属性可以通过对象键值的方式进行设置。...// 获取属性 (0 in this && this[0].nodeType == 1 && (result = this[0].getAttribute(name)) != null ?...// 获取属性 (0 in this && this[0].nodeType == 1 && (result = this[0].getAttribute(name)) != null ?...紧接着再看当前选中的元素集合中第一个元素是否存在并且节点类型是否为element类型,如果是,再调用getAttribute获取name属性,结果不为null或者undefined的话直接返回,否则统一返回...deserializeValue(data) : undefined }, data方法源码分为三个部分 将传入的name属性转化为data-开头的连字符 通过attr方法设置或者获取属性 attr方法的返回值再做一层映射处理

    2.4K70

    读Zepto源码之属性操作

    this[0].innerHTML : null) 先来看看获取值,0 in this 是判断集合是否为空,如果为空,则返回 null ,否则,返回的是集合第一个元素的 innerHTML 属性值。...还有,textContent 直接赋值为 null 或者 undefined ,也会自动转换为 '' ,为什么还要自己转换一次呢?...=null ,则返回获取到的属性值,否则返回 undefined 。 再来看设置值的情况: this.each(function(idx) { if (this.nodeType !...== null ? deserializeValue(data) : undefined }, data 内部调用的是 attr 方法,但是给属性名加上了 data- 前缀,这也是向规范靠拢。...为什么要用严格等 null 来作为判断呢?这个我也不太明白,因为在获取值时,attr 方法不存在的属性返回值为 undefined ,用 !== undefined 判断会不会更好点呢?

    1.8K00

    学习zepto.js(对象方法)

    () $(““).attr(“id”,null);//–> [] 需注意的只能传入null才能触发remove效果....传入function与json都可以,只要是返回值或者值为null,都会触发remove; removeAttr: removeAttr相当于(功能)是attr的一部分.但是代码实现是分开的.这个函数应用场景比较单一...来转换为bool值.如果没有通过getAttribute方法取出来值,并且该属性存在于节点, ——通过节点直接取值. ——否则直接返回getAttribute返回值....val方法.都是操作dom属性的.一气儿说完它; data: 方法接受两个参数,第一个是name,第二个为值,如果不填第二个则执行取值,否则为赋值 用法与attr类似,但是会将传入的name值加上”data...-“的前缀,并且会将驼峰命名转换为全小写连字符的格式; 取值时也不需要加”data-“前缀.

    2.6K90

    Mybatis查询结果为空时,为什么返回值为NULL或空集合?

    开始前我们先看一个问题: 你是否曾经在学习 Mybatis 的时候跟我有一样的疑问,什么情况下返回 null,什么时候是空集合,为什么会是这种结果?那么你觉得上述这种回答能说服你嘛?...看完这篇你就知道查询结果为空时候为什么集合会是空集合而不是 NULL,而对象为什么会是 NULL 了。 PS:对过程不感兴趣的可以直接跳到最后看结论。...最后返回映射的结果对象,如果没有映射任何属性,则需要根据全局配置决定如何返回这个结果值,这里不同场景和配置,可能返回完整的结果对象、空结果对象或是 null。...这个可以关注 mybatis 配置中的 returnInstanceForEmptyRow 属性,它默认为 false。 当返回行的所有列都是空时,MyBatis 默认返回 null。...而且如果是 Map 作为返回值的话,那直接是返回NULL 好吧,简直是错的离谱!

    5.3K20

    Javascript DOM(一)

    DOM:节点结构化表诉,并定义了一种方式可以使程序该结构进行访问,将 web 页面和脚本语言连接起来。 通过 DOM 接口可以改变网页的内容、结构和样式。...获取属性值 element.属性 只能获取内置属性值,无法获取自定义属性值,如index、data-index等,其中data-*是H5的自定义属性 例子: var div = document.querySelector...("#demo"); console.log(div.getAttribute("id")); console.log(div.getAttribute("index")); 设置属性值 和获取一样,...出现问题:不容易判断是内置属性还是自定义属性 设置 H5 自定义属性 H5 规定自定义属性 data-开头作为属性名 直接在标签后给属性赋值 例子: ...", "2"); 这里设置为数值时可以不用字符串形式 获取 H5 自定义属性 element.getAttribute(‘属性’);和上面用法一样,不同的只是自定义属性data-开头 H5 新增

    1.1K30

    自定义属性操作

     element.getAttribute('属性'); 区别: element.属性 获取内置属性值(元素本身自带的属性) element.getAttribute(‘属性’); 主要获得自定义的属性...H5自定义属性 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute(‘属性’) 获取。...但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。 H5给我们新增了自定义属性: 1. 设置H5自定义属性 H5规定自定义属性data-开头做为属性名并且赋值。...获取H5自定义属性 1. 兼容性获取 element.getAttribute(‘data-index’); 2....')); console.log(div.getAttribute('data-list-name')); // h5新增的获取自定义属性的方法 它只能获取data-开头的

    78830

    JavaScript笔记(13)

    先总结一下操作元素的知识点 排他思想 今天学习的是排他思想,具体表现为什么呢?...就比如这个轮播图,当我们选择了特定的元素时样式才会改变,而其他的不变,返回原来的状态 我们试着用按钮模拟一下,当我们点击了哪一个,哪一个按钮的背景颜色就变成粉色....一开始跟着老师做的,但是电脑抽风了,明明写的代码是的就是不执行......现在我们学习新的获取属性值的方法: element.getAttribute('属性') 区别: element.属性: 获取内置属性值(元素本身自带的属性) element.getAttribute...H5给我们增加了自定义属性: 1.设置H5自定义属性 H5规定自定义属性'data-'开头作为属性名并且赋值 比如 2.获取H5自定义属性

    56720

    HTML5 自定义属性 data-* 和 jQuery.data 详解

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置。...利用 getAttribute、setAttribute 存取 dataset 作为HTML元素的标签,dataset的存取也服从getAttribute、setAttribute,而且这两个方法兼容性也最广...所做出的任何更改,都是可以实时反映到元素data属性上的。 但是这种方法比较低端,如果遇到多个data-*自定义字段,想要一次全部获取所有的data属性并包装成对象的话,还必须做一个循环,很麻烦。...利用 jQuery.data 方法存取 dataset jQuery从1.4.2版本开始支持$.data()方法来直接访问data属性,同时也不需要写"data-"关键词了,例如,对于上面的例子,可以运行...,但是需要注意,jQuery.datadata数据做出的更改,不会反映到HTML元素data属性上。

    1.5K50
    领券