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

小开

不，这将破坏验证。

在HTML 5中，您可以/将能够添加自定义属性。就像这样:

<tag data-myAttri="myVal" />

小开

是的，你可以，你在问题本身做了:<html myAttri="myVal"/>。

小开

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

在HTML 5中，你将有机会使用自定义数据属性前缀为data-。

小开

jQuery data()函数允许您将任意数据与DOM元素关联。这里有一个例子。

小开

最佳答案

你可以修改你的!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>
]>

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

更多信息在DTD - Attributes中。

小开

您可以通过JavaScript设置属性。

document.getElementById("foo").myAttri = "myVal"

小开

你可以添加，但你也必须写一行JavaScript代码，

document.createElement('tag');

确保一切都到位。我指的是Internet Explorer:)

小开

是的，你能做到!

具有下一个HTML标记:

<tag key="value"/>

我们可以使用JavaScript访问它们的属性:

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter

Element.setAttribute()如果属性不存在，则将其放在HTML标记中。所以，如果你打算用JavaScript设置它，你不需要在HTML代码中声明它。

key:可以是属性的任何名称，而当前标记尚未使用。 value:它总是一个包含你需要的东西的字符串

小开

你可以像这样从JavaScript中提取你想要的值，而不是一个属性:

<a href='#' class='click'>
<span style='display:none;'>value for JavaScript</span>some text
</a>

小开

另一种干净的方法是将你想要的数据连接到另一个标签中，例如id，然后使用split来获取你想要的东西。

<html>
<script>
function demonstrate(){
var x = document.getElementById("example data").querySelectorAll("input");
console.log(x);
for(i=0;i<x.length;i++){
var line_to_illustrate = x[i].id  + ":" + document.getElementById ( x[i].id ).value;
//concatenated values
console.log("this is all together: " + line_to_illustrate);
//split values
var split_line_to_illustrate = line_to_illustrate.split(":");
for(j=0;j<split_line_to_illustrate.length;j++){
console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
}
}
}
</script>


<body>


<div id="example data">
<!-- consider the id values representing a 'from-to' relationship -->
<input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
<input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
<input id="3:6" type="number" name="quantity" min="0" max="9" value="5">
</div>


<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>


</body>
</html>

小开

在HTML5中:yes:使用数据——属性。

 <ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>

小开

下面是例子:

document.getElementsByTagName("html").foo="bar"

下面是另一个如何将自定义属性设置为body tag元素的示例:

document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";

然后读取属性:

attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2

你可以在DevTools中测试控制台中的上述代码，例如:

小开

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar

<div id="demo" data-myvar="foo">anything</div>

小开

使用任何数据，我经常使用它们

<aside data-area="asidetop" data-type="responsive" class="top">

小开

好!你可以通过把数据属性伪装成你想要的样子来创建一堆自定义的HTML属性。

如。

[attribute='value']{
color:red;
}

<span attribute="value" >hello world</span>

这显然是有效的，但这将使您的文档无效，没有必要使用JScript为您有自定义属性甚至元素，除非你必须，你只需要对待你的新制定(自定义)属性，就像你对待你的“数据”属性一样

还记得 "invalid"没有任何意义。文档在任何时候都能正常加载。一些浏览器实际上只通过DOCTYPE.....来验证文档

小开

是的，你可以使用data-*属性。 data-*属性用于存储页面或应用程序私有的自定义数据

<ul>
<li data-pageNumber="1"> 1 </li>
<li data-pageNumber="2"> 2 </li>
<li data-pageNumber="3"> 3 </li>
</ul

小开

我可以想到自定义标记"init"的一个方便的用法。包含一个JavaScript表达式，该表达式在document.onLoad()时间被求值，并为标记提供一个值。

<p>&lt;p&gt;The UTC date is &lt;span init="new Date().toUTCString()"&gt;?&lt;/span&gt;.&lt;p&gt;</p>

一些JavaScript样本代码会在document.onload()时间扫描DOM中的所有标记，寻找init属性，计算它们包含的表达式，并将它们分配给包含标记的innerHTML。这将赋予HTML一些JSP、PHP等的强大功能。目前，我们必须将HTML标记和说明它的JavaScript代码分开。bug喜欢拆分代码。

小开

对于自定义< em > <强>元素< /强> < / em >，添加不带data-前缀的自定义< /强> <强>属性似乎很常见。

下面是一个来自HTML标准:自定义元素的例子(注意country属性):

<flag-icon country="nl"></flag-icon>

另一个来自MDN Web文档:使用自定义元素的例子(注意l和c属性):

<custom-square l="100" c="red"></custom-square>