我可以将自定义属性添加到HTML标记吗?

lov*_*ing 323 html custom-attribute

我可以将自定义属性添加到HTML标记,如下所示: __CODE__

Gum*_*mbo 288

您可以随意向元素添加自定义属性.但这会使您的文档无效.

在HTML 5中,您将有机会使用前缀为的自定义数据属性data-.

  • 记住"无效"意味着什么.该页面将100%正常呈现. (165认同)
  • 实际上,"无效"具有非常现实的含义.例如,它可以将您的文档放入quirksmode渲染.无论如何,请使用HTML5文档类型,您将有效. (22认同)

car*_*tor 184

您可以修改您的!DOCTYPE声明(即DTD)以允许它,以便[XML]文档仍然有效:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>
Run Code Online (Sandbox Code Playgroud)

#IMPLIED意味着它是一个可选的属性,或者你可以使用#REQUIRED,等等.

更多信息:

http://www.w3schools.com/xml/xml_dtd_attributes.asp

  • 此答案仅适用于XHTML和HTML 4.01及更早版本.完全错过了如果你用`data -`作为前缀,你现在可以创建自己的属性. (31认同)
  • 也许我错过了一些东西,但是如果你遵循这种方法,那么]>会出现在渲染的网页中.在Firefox 3.6上发生在我身上.来自http://www.alistapart.com/articles/customdtd/的这个片段似乎验证了这种行为:"如果您下载本文的示例文件并验证文件internal.html,您可以亲眼看到这一点.不幸的是,当你在浏览器中显示文件,]>显示在屏幕上.没有办法解决这个错误,所以这种方法是正确的." (8认同)
  • 就浏览器行为而言,声明属性毫无意义.他们不读DTD.此外,他们甚至无法正确跳过内部子集(这里使用),这解释了"]>"meass.声明仅与正式验证相关,不应在生产页面上使用. (4认同)
  • 一些可能有助于"]>"出现的事情:使用.xhtml文件扩展名保存文件.使用`<meta http-equiv ="content-type"content ="application/xhtml + xml"/>`在文件中包含MIME类型. (3认同)
  • 把所有这些放在你的html文件的顶部(假设xhtml 1.0过渡是好的) (2认同)

小智 68

不,这将破坏验证.

在HTML 5中,您可以/将能够添加自定义属性.像这样的东西:

<tag data-myAttri="myVal" />
Run Code Online (Sandbox Code Playgroud)

  • 创建无效文档是个好主意.Google创建它们以减少加载时间,使用canvas的每个站点都使用它们来创建更好的用户体验,并且使用javascript框架从html元素中提取有意义的数据使用自定义属性技术更容易. (31认同)
  • 它当然会起作用.但故意制作无效文件并不是一个好主意. (9认同)
  • 但是,我不关心验证,我只是想通过javascript访问它. (8认同)
  • @jfar:Canvas无效.它不在HTML 4.01中; 但是,它是即将推出的HTML5规范的完美合法部分. (3认同)
  • 你的意思是"无效"?它不属于任何公认的规范.对于不存在的规范,如何才能有效? (3认同)
  • 规范提到不要使用大写字母,所以它是 &lt;tag data-myattri="myVal" /&gt; (2认同)

Dra*_*mon 33

data() data()函数允许您将任意数据与dom元素相关联.这是一个例子.

  • 这是金色的。 (2认同)

Dav*_*rea 18

在HTML5中:是:使用data-属性.

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul> 
Run Code Online (Sandbox Code Playgroud)

  • 更好的权威:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes (3认同)

luv*_*ere 11

是的,你可以,你在问题中做到了:<html myAttri="myVal"/>.

  • 取决于您将HTML定义为.我认为HTML是一种基于SGML的语言,具有一组特定的元素和属性.XHTML是XML的变体,具有一组特定的元素和属性,就像HTML一样.当你使用自己的属性时,它仍然是XML的SGML,但在我看来不再是XHTML的HTML. (2认同)
  • DouweM:当然,总是存在HTML5的HTML序列化,既不是SGML也不是XML. (2认同)
  • 您在此过程中破坏了文档(使之无效)。不好的做法。 (2认同)

小智 7

您可以从JavaScript设置属性.

document.getElementById("foo").myAttri = "myVal"
Run Code Online (Sandbox Code Playgroud)


Ign*_*ers 7

是的,您可以做到!

具有下一个HTML标签:

<tag key="value"/>
Run Code Online (Sandbox Code Playgroud)

我们可以使用以下命令访问它们的属性JavaScript

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter
Run Code Online (Sandbox Code Playgroud)

Element.setAttribute()HTML如果不存在,则将属性放入标记中。因此,HTML如果要使用进行设置,则无需在代码中声明它JavaScript

key:可以是您想要的属性名称,而当前标签尚未使用。 value:始终是包含所需内容的字符串。


Jas*_*oid 7

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar
Run Code Online (Sandbox Code Playgroud)
<div id="demo" data-myvar="foo">anything</div>
Run Code Online (Sandbox Code Playgroud)

  • 请在回答中添加简短说明。 (2认同)

Eri*_*eau 5

使用 data-any ,我经常使用它们

<aside data-area="asidetop" data-type="responsive" class="top">
Run Code Online (Sandbox Code Playgroud)

  • 在上面的示例中为“elem.dataset.area”。对于带有附加破折号的属性,请使用驼峰命名法。例如。`data-box-area="30px"` 变为 `elem.dataset.boxArea`。 (4认同)
  • 如何从 JavaScript 获取“data-*”值? (2认同)