为什么.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
需要注意的是，上述内容仅供参考，实际情况可能因具体使用的技术和平台而有所不同。
相关·内容
1回答
我使用JS创建了一个动态下拉列表
var str = `<select onchange="getPrice(this)"><option value="">Select</option>`;
for(var s=0;s<arr.length;s++) {
str += `<option value="${arr[i].name}" price="${arr[i].price}">${arr[i].name}</option>`;
}
str += '
浏览 0提问于2018-12-06得票数 0
回答已采纳
为什么它不起作用？ var x = document.getElementById('test').name;
alert(x); // jhon <div id='test' name='jhon'> its just a text </div>
浏览 51提问于2020-11-20得票数 0
我有一些HTML，我正在尝试用这个脚本获取"data-nChargers“的值 var noOfChargers = document.getElementById("chargers-list")
.getAttribute("nChargers");
console.log(noOfChargers); <div id="chargers-list" data-nChargers="4"></div> 但它返回null。我做错了什么？
浏览 91提问于2016-12-31得票数 0
回答已采纳
4回答
如果会话存在或不存在
、、、
我试图在Google App Engine上编写我的第一个应用程序，我试图维护一个会话，我在submit上创建了一个登录页面，它调用了一个servlet，servlet验证了用户，并使用以下代码创建了一个新会话。
void createSession(String Username) {
getThreadLocalRequest().getSession(true).setAttribute("Username", Username);
}
在调用servlet重定向到某个页面(即abc.jsp )之后，我的abc.jsp页面包含
<body&g
浏览 1提问于2012-08-12得票数 9
回答已采纳
我有一个代码，它将从mysql中提取数据并使用复选框显示。在单击复选框时，它将给出总计的总和。
<td><input type="checkbox" name=check[] value="<?php echo $row['amount'];?>" data-weight="<?php echo $row['amount'];?>"> </td>
<div>Total: <span id="total">0<
浏览 0提问于2014-09-16得票数 0
回答已采纳
我尝试使用jQUery 1.6.2获取div元素的属性
html
<div id="scroller" loop="2"></div>
js
$('#scroller').attr('loop')
上面的js总是返回undefined。
我尝试将jquery升级到1.6.4，然后同样的js返回给我单词'loop‘。这个循环属性是保留属性吗？
我这样做是因为我使用一个用于滚动文本的库。
浏览 4提问于2011-10-28得票数 1
回答已采纳
1回答
播放框架删除请求
、、
希望有人能帮助我，我正在尝试获得一个删除请求，以便在play框架中工作。从我的html页面，我有一个按钮，它使用了一个ajax语句，但是现在我得到了一个null错误的不能读取属性'addeventlistener‘。我对所有这一切都是新手，并且遵循了一个教程，但这个教程使用了onclick方法，我现在正试图克服这个方法。谢谢
document.getElementById("myBtn").addEventListener("click" ,sendDeleteRequest);
function sendDeleteRequest(url, rUrl
浏览 0提问于2018-07-05得票数 0
HTML代码片段：
<input title="List" data-id="1698481">
在IE11控制台中，我一直在尝试各种命令，所有没有连字符的命令都会正确返回，直到我点击“data-id”。
document.getElementsByTagName("input")[0].title
"List"
document.getElementsByTagName("input")[0].data-id
'id' is undefined
根据这个主题的其他线程，我尝试了其他语法
浏览 0提问于2016-05-21得票数 2
我无法通过使用此运算符将对象传递给loadApp()来使用div标记的属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" c
浏览 1提问于2013-11-14得票数 0
我正在寻找关于如何让这个工作的建议。
<input type='text' id='%(settling_cell_id)s' data-row='%(row)s' value='%(val)s' size = '9' style='height:20px' onchange='getvalue(this)'>
getvalue = function(settling_amount_cell){
console.log(se
浏览 0提问于2020-01-23得票数 0
我在我的网站上有以下JS代码：
function foo(link) {
alert('ID=' + link.DocumentID + '; Lang=' + link.Language);
}
它应该在每次单击以下链接时调用：
<a href='http://www.example.com' DocumentID='someDocId' Language='en' onclick='foo(this);'>Example page</a>
(这只是我实际代码的简化
浏览 0提问于2012-05-30得票数 0
回答已采纳
我有一个HTML文件，并试图使用DOM查找所有<h2>元素的<h2>属性：
$html = new DOMDocument;
$html->loadHTML($file);
$headings = $html->getElementsByTagName('h2');
正如预期的那样，它返回一个计数等于文档中标题数的DOMNodeList。但是，当我迭代并尝试探索通过var_dump或print_r返回的数据时，会得到属性列表的一个错误(对象值省略)：
object(DOMElement)#10 (18) {
["tagName&#
浏览 0提问于2018-09-03得票数 1
回答已采纳
这是我的div：
<div id="demo" align="center" value="1">
<h3>By Color</h3>
<input type="radio" name="group1" id="color1" value="#990000" onClick="changeColor()"/><label for="color1">Red</label
浏览 5提问于2012-06-28得票数 23
回答已采纳
为什么在这个非常简单的组件中登录到控制台时e.target.value是未定义的？该值是在元素中定义的，因此我不明白为什么e.target将该值作为未定义的值返回。
const NavBar = () => {
const handleClick = (e) => {
console.log(e)
}
return (
<div id="navbar">
<nav class="navbar navbar-expand-lg navbar-l
浏览 3提问于2022-10-24得票数 0
2回答
可能重复：
我正在尝试支持一些旧代码，并且在html中的Select元素中有一个选项元素：
<select onChange="selectURL(this)" style="font-family:Arial; font-size:12;" id="select1" name="select1">
<option ThisCourse="80921" TITLE="- _ ~ : / = ’ ; . , ? ) (.2\" CLASS="" ID=&
浏览 1提问于2012-01-24得票数 0
回答已采纳
1回答
如果有人知道在IE5中是如何发生的，以及如何在IE11中纠正，那么需要帮助
我刚开始调查一个问题。有一个只在IE中使用的web应用程序，兼容模式是IE5。现在，我将兼容性模式迁移到IE11 (边缘)。我看到下面的代码行，它在IE5兼容性方面运行良好，但在IE11中却抛出了未定义的代码。
<td style='text-align: left;' class='isEditable-no' dataType='customerGciNo'>
..。
javascript:
alert(oCell.dataType); ->
浏览 0提问于2017-01-20得票数 0
回答已采纳
3回答
无法获取数据集的数值
、、、
<select class="license_type" name="license_type" id="license_type">
<option value="l_one" data-one="500">License 1</option>
<option value="l_two" data-two="700">License 2</option>
<option value="
浏览 29提问于2019-02-14得票数 2
回答已采纳
如何获取Material-UI Button的属性？我试过getAttribute()，但它给了我null。我知道这可以使用普通的<button>标签，但我想尝试使用Material-UI按钮。
我的按钮-
<Button
variant="outlined"
id={button1}
button-key="buttonAttribute"
onClick={this.isClicked}>
MyButton
</Button>
单击函数-
isClicked = (e) =&g
浏览 1提问于2020-10-11得票数 2
当用户单击链接时，我试图使用href返回链接的JavaScript属性。我希望链接链接到的URL以警报形式显示，而不是加载页面。
到目前为止，我有以下代码：
function doalert(){
alert(document.getElementById("link").getAttribute("href"));
return false;
}
使用以下标记：
<a href="http://www.example.com/" id="link" onclick="return doalert()
浏览 3提问于2013-07-23得票数 15
回答已采纳
我认为element.getAttribute('onclick')会返回element.onclick设置为的字符串版本。
var as = document.getElementsByTagName('a');
for(var i=0; i < as.length; i++) {
// set test to some javascript text
var test = as[i].getAttribute('onclick');
// set test to "null"
var
浏览 2提问于2013-09-07得票数 1
此函数用于隐藏患者笔记并显示下一个笔记(如果他们有另一个笔记)
function nextNote(idno){
document.getElementById(idno).style.display = 'none';
var idno2 = parseInt(idno)+1;
document.getElementById(idno2.toString()).style.display = 'inline';
document.getElementById('prevNote').label = parseIn
浏览 1提问于2012-08-04得票数 0
回答已采纳
我想使用jQuery的data()来检索元素的所有数据属性。但是这个api的缓存特性真的很烦人。有时我需要更改data()中元素的一些数据属性，但javascript api总是返回每个数据属性的初始值。因此，我必须使用attr()来访问元素的每个数据属性，以获取其最新值。有没有办法克服这个缓存问题，让data()每次调用都返回最新的值？
浏览 3提问于2014-02-06得票数 23
一整天都在为这件事头昏脑胀。
// Iterate over project array to populate release data
for ($i = 0; $i < count($data); $i++) {
$data[$i]->setProjectReleaseSchedule( $proj_scheds[$i] );
//Get each projects Est and Act hours
$options = new stdClass;
$options-&
浏览 4提问于2013-01-09得票数 1
回答已采纳
我是一个学生，我不能理解为什么这个方法不起作用。
function addedToCart(x)
{
alert( x.value + " has been added to cart\nPress OK to continue.");
}
<a href="#" value="blue circle" onclick="addedToCart(this)">
如有任何帮助，我们不胜感激！
浏览 0提问于2012-09-22得票数 2
回答已采纳
很难找到一个好的标题，但希望这是好的。
我现在用：
document.title = page + ' - ' + originalTitle
<a class="menu" id="Home" href="index.php">Home</a>
所以现在的结果是"index - originalTitle"。但是，我会将“页面”改为“id”之类的内容，或者只是在a标记之间接管文本，例如：
document.title = a id + ' - ' + originalTit
浏览 6提问于2016-09-01得票数 0
回答已采纳
我不知道为什么我的session.getAttribute("user")返回not null，但几分钟后属性值返回null，这可能是由于会话超时，但为什么只有属性值返回null，而其他会话仍然返回not null，甚至session.getAttribute("user")也返回not null。
这是我的网页流程，用户登录
LoginServlet
User s = new User();
s.retriveuser();
session.setAttribute("balance", s.getBalance());
session.set
浏览 33提问于2011-06-22得票数 4
我需要一种方法来列出元素的data-*属性。我会使用Object.keys(element.dataset)，但IE9.0不支持dataset。我应该如何在IE 9.0 (以及Chrome，Firefox，Safari)上工作呢？
浏览 1提问于2012-09-10得票数 3
回答已采纳
2回答
超文本标记语言数据属性IE6支持
、、、、
超文本标记语言的数据属性在IE6中有效吗？
我使用的属性类似于这个<img id="charm_1" data-code='sdfsdfsdfsdf' data-price='100' class='addition_image' src="img/misc/donut.png" width="55" height="55" alt="Donut">。
如您所见，有两个数据属性(价格和代码)。我可以在jQuery中使用.data()方法来实现这一点，而且在
浏览 1提问于2011-10-21得票数 0
回答已采纳
如何像javascript onclick函数一样在jquery "on“函数中获得id？提前感谢
html
@foreach ($datas as $key=>$data)
<Button onclick="viewReturn('{{$data->id}}')" class="get-data">Save</Button>
@endforeach
javascript
function viewReturn(id) {
$.ajax({
method: 'Ge
浏览 0提问于2021-06-02得票数 1
回答已采纳
如何使用javascript获取第一个类名的值？
我试着测试下面的代码。但还是会提醒undefined的。
如何对类测试的警报第一值(alert 1)执行此操作？
<div class="test" value="1"></div>
<div class="test" value="2"></div>
<div class="test" value="3"></div>
<script>
var list = d
浏览 1提问于2016-04-12得票数 0
5回答
我有一个像这样的div
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
在这里，我想通过执行document.getElementById('first').value或类似这样的操作来获得data-value中的值。
我如何获得这个值，或者是否有类似的方法
浏览 3提问于2016-09-01得票数 3
我想对大量元素使用.filter函数，在这些元素中，我要检查data-*属性，但是它们是由.data方法设置的。
问题是jQuery选择器总是使用原始值。如果我使用$('whatever').data('key', newValue)设置数据值，然后尝试使用选择器$('[data-key=newValue]')，则什么也找不到。
下面是我的测试HTML：
<div id="test" data-dummy="foo"></div>
<div id="result"<
浏览 1提问于2013-08-08得票数 1
回答已采纳
我刚刚注意到，如果我给一个html元素一个自定义属性，例如：
<input type="button" id="my_button" custom_attr="custom_attr_text" value="value_text" />
然后我可以像这样检索它：
document.getElementById("my_button").getAttribute("custom_attr");
它将返回"custom_attr_text"，但如果我这样做了
documen
浏览 4提问于2013-02-22得票数 9
回答已采纳
2回答
类与数据属性，自动字段初始化器
、、、、
一点背景
我用javascript/jQuery编写了一个方法，它循环遍历字段，并根据它们的内容设置它们，即下拉、自动完成、文本等等。
这样做的原因是，我专门为输入和文本区域设置了样式，页面加载后必须在javascript中初始化输入和文本区域。这个类中的方法循环遍历页面上的每个字段，并根据事件的内容设置事件。
目前，我正在通过给字段容器一个类来检测每个字段是什么，jQuery读取这个类并相应地设置字段如下：
<div id="company-container" class="autocomplete autocomplete-215 form-sprite&#
浏览 2提问于2012-10-30得票数 3
回答已采纳
我怀疑有一些关于JavaScript参数传递的基础知识我并不理解。
如果我点击此按钮，我会在警告框中收到一条“undefined”消息。
<button onclick="play_audio(this.src)" src="foo.m4a">▶</button>
如果我单击此按钮，字符串值将正确传递：
<button id="foo.m4a" onclick="play_audio(this.id)">▶</button>
Codepen在这里：
浏览 1提问于2018-07-31得票数 0
2回答
我正在使用selenium检查一个web元素，然后获取它的"href"
driver.findElement(getSelectorForButton(name)).getAttribute("href")
为什么我得到的结果是...current url...#而不是我在浏览器控制台看到的jut #？
<a class="action-btn big-button btn-phone take-button v3" data-model="{"analytics_url":"/
浏览 0提问于2015-02-05得票数 0
它是javascript中脚本，用于添加<div></div>和添加id、类、html.我也想添加name属性，但是我的代码不能工作，但是我想知道为什么..
在那里，我看到element.name = 'newname';可以对其进行编辑。
function newgroup() {
var e = document.getElementsByName('group');
var nb = e.length + 1
div = document.createElement("div");
d
浏览 0提问于2012-07-29得票数 0
回答已采纳
这是一个错误：
<bean:define id="myid" value="<%=request.getAttribute("key")%>"
但后跟cast (String)是可以的：
<bean:define id="myid" value="<%=(String)request.getAttribute("key")%>"
更重要的是。跟在后面没问题。
this is <%=request.getAttribute("key")%>
浏览 0提问于2014-04-17得票数 0
我有三个段落<p>，我想在一个textarea中显示它们的id值，这是我使用的代码：
var pNodesList = document.getElementsByTagName('p');
var text = "";
var pArrayList = Array.prototype.slice.call(pNodesList);
pArrayList.forEach(function(value, index){
text += value.getAttribute('id') + String.fromCharCod
浏览 2提问于2014-02-23得票数 3
回答已采纳
我试图获得所有在类型记录中都有类名并需要检查每个元素的数据属性的元素集，这就是我迄今所做的：
let getTopElements :NodeListOf<HTMLElement> = document.querySelectorAll('.timeline-row');
var newArr: HTMLElement[] = Array.prototype.slice.call(getTopElements);
if (getTopElements){
for (let element of newArr){
if (element.data(&#
浏览 1提问于2018-02-23得票数 0
我有这样的html标记：
<il class="currItem" data-sourcemp3="http://**">
<il class="currItem" data-sourcemp4="http://**">
我希望得到这个数据值，即使我写的这个mp3或mp4：
var A = $('.currItem').attr("data-source(.+)")
console.log(A);
或者：
var srcName = new RegExp(/data-sour
浏览 3提问于2016-04-21得票数 5
回答已采纳
我有以下HTML代码：
<input type = "button" id = "someID" data-ddd='{"a": 1, "b": "2"}' onclick = "someevent(this)" />
活动执行情况：
function someevent(element) {
var d = $.parseJSON(element.data("ddd"));
alert(d.a);
}
在这一行：
var d = $.p
浏览 3提问于2015-05-11得票数 1
回答已采纳
var a = document.querySelector("a");
console.log( a.href == a.getAttribute("href") ); //why false? (tested on chrome)
<a href="#hello">Link</a>
为什么输出是假的？我的意思是，我知道.href正在返回整个url，而.getAttribute()只返回实际写在html上的部分，这就是为什么比较的结果是假的。，但我不知道这是否符合规范和为什么是。另外，我想知道这是否与其他属性有关
浏览 1提问于2015-10-19得票数 2
回答已采纳
6回答
自定义数据属性：
当我说“工作”时，我的意思是，如果我有这样的HTML：
<div id="geoff" data-geoff="geoff de geoff">
将显示以下JavaScript：
var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);
在IE 6中生成一个带有“geoff de geoff”的警报吗？
浏览 1提问于2010-03-10得票数 174
回答已采纳
6回答
如果下一个命令：
console.log(document.getElementById('container'));
指纹：
<div id="container" prjid="ABCDE">...</div>
为什么下一个命令：
console.log(document.getElementById('container').prjid);
指纹不明？我试图得到prjid的值
浏览 2提问于2018-02-03得票数 3
回答已采纳
我正在通过Servlet上传一个图像。
try{
//Image Upload Code
} catch(Exception e){
//Exception Handler
} finally {
request.setAttribute("job-id", jobId);
request.setAttribute("message", message);
System.out.println("SJA : " + message);
getServletContext().getRequestDi
浏览 3提问于2016-02-16得票数 0
回答已采纳
我动态地创建了3个按钮。如何将参数传递给handlerX
因此，基本上，我希望类别数组中的值传递给handlerX eventListener。当单击myBtn1时，我希望警报为"fur_"，当单击myBtn3时，希望警报为"fas_“。
var btns = '';
var category = ["fur_", "fts_", "fas_"];
for (i = 1; i < category.length; i++) {
btns += '<button type="
浏览 7提问于2015-05-04得票数 2
回答已采纳
3回答
我使用setAttribute来存储元素的一些信息，这样以后我就可以将值恢复为它的innerHTML。我的问题是，当属性没有设置( element.getAttribute("attr") )时，返回值到底是什么？
它似乎在chrome中返回null (这对我来说很好)，但我读到它也可以返回空字符串，但如果设置了空字符串，我想使用该值。
所以我显然不能这么做：
var value = element.getAttribute("prev_value");
if (value) { // won't cover the empty string case,
浏览 1提问于2016-09-08得票数 2
代码操纵一个表来显示彼此相邻的软件特性(这样人们就可以比较它们)。当某人单击特定的软件图标时，它将在表中显示或隐藏该软件的功能。
下面的代码在IE9中工作得很好，但是features.querySelectorAll没有在Chrome中填充标题/列。
element.querySelectorAll在Chrome中不工作吗？
function viewfeature(feature) {
var features = document.querySelector('#birdseye');
var headers = features.querySelector
浏览 1提问于2012-12-03得票数 0
5回答
有人知道我在哪里犯错误吗？
function functionTest(name) {
var Name = name;
alert(Name);
}
<h3 id="name" value="testingName"><a href="#"> test </a></h3>
<button onclick="functionTest(document.getElementById('name').value)"></button>
浏览 4提问于2017-03-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
