获取 div 标签的特殊属性的值答案

【问题标题】：Getting the value of a div tag's special attribute获取 div 标签的特殊属性的值
【发布时间】：2018-02-03 08:55:50
【问题描述】：

如果下一个命令：

 console.log(document.getElementById('container'));

打印：

 <div id="container" prjid="ABCDE">...</div>

为什么下一个命令：

 console.log(document.getElementById('container').prjid);

打印未定义？我正在尝试获取 prjid 的值

【问题讨论】：

【解决方案1】：

prjid 是一个属性。您应该使用函数getAttribute 来获取任何属性值。

getAttribute() 返回元素上指定属性的值。如果给定属性不存在，则返回的值为 null 或 ""（空字符串）；

 console.log(document.getElementById('container').getAttribute("prjid"));

 &lt;div id="container" prjid="ABCDE"&gt;...&lt;/div&gt;

【讨论】：

【解决方案2】：

为了获得prjid，它不是 div 上的定义属性而是自定义属性，您可以使用 getAttribute

document.getElementById('container').getAttribute('prjid')

片段

console.log(document.getElementById('container').getAttribute('prjid'));

&lt;div id="container" prjid="abd"/&gt;

根据 MDN 文档：

getAttribute() 返回指定属性的值元素。如果给定属性不存在，则返回值将为 null 或 ""（空字符串）；

注意：在 React 中你不应该使用 document.getElementById 而应该使用 refs。检查this答案

【讨论】：

【解决方案3】：

为了获得prjid，请使用getAttribute

document.getElementById('container').getAttribute('prjid');

getAttribute() 返回元素上指定属性的值。如果给定的属性不存在，则返回的值为 null 或 ""（空字符串）；

【讨论】：

【解决方案4】：

您可以获取数据属性，而不是这样做如下所示

document.getElementsById("container").getAttribute("prjid");

【讨论】：

【解决方案5】：

你可以通过getAttribute这样的函数来获取

console.log(document.getElementById('container').getAttribute("prjid"));

你可以阅读这个here

【讨论】：

【解决方案6】：

如果你想得到一个值，并且那个值放在一个自定义属性中，你必须使用 getAttribute() 方法，像这样

var pjid = document.getElementById('container').getAttribute('pjid');

并在您的元素中创建此属性

<div id="container" pjid="some-thing" >

但是我觉得你在 React 中是这个问题，因为你标记 reactjs，在 react（prev version - 小于 16），JSX 删除所有未定义的属性，但这个问题在 react 16 中解决，你必须迁移到这个版本

【讨论】：