全面解析HTML5中的标准属性与自定义属性

2020-03-24 17:28:30

字体：大中小

来源：转载

供稿：网友

正如 HTML5 语法中所阐述的，元素可以包含属性（attributes）给一个元素设置各种属性（properties）。有些属性被定义为全局的，可以用在任何元素上，而其他的被定义为元素特有的。所有的属性都有一个名称和一个值，看起来如下面的示例所示。下面是一个使用 HTML5 属性的例子，演示了如何用名为 html' target='_blank'>class 的属性和值 example 标记一个 div 元素： div >属性只能在起始标签中指定，绝对不能用在结束标签中。HTML5 属性不区分大小写，可以全部大写或者混合使用，尽管最常见的约定是始终使用小写。标准属性
下面列出的属性几乎所有的 HTML5 标签都支持。

用户定义。自定义属性。 HTML 文档的作者可以定义自己的属性。自定义属性必须以 data- 开头。
自定义属性
HTML5 还引入了一个新特性，就是可以添加自定义的数据属性。自定义数据属性以 data- 开头，基于我们的需求命名。下面是一个简单的例子： div >...
/div
上面的例子中两个叫做 data-subject 和 data-level 的自定义属性在 HTML5 中是完全有效的。我们还可以使用 JavaScript API 或者在 CSS 中以获取标准属性类似的方式获取它们的值。在HTML元素中添加自定义属性，通过JavaScript进行访问，如果你之前有尝试过，你会发现，容易忽略标记验证，而HTML5可以为你提供在有效的网页内创建并使用自己的元素属性的功能。创建HTML5文件：如果你还没想好要使用哪一个，可以复制下面的代码：
XML/HTML Code复制内容到剪贴板

在body中设置自定义元素，在head部分脚本区域利用JavaScript元素进行访问。创建元素：首先，添加一些简单的内容和自定义属性以及ID等元素，以便我们能够识别JavaScript示例。
XML/HTML Code复制内容到剪贴板

正如你所看到的那样，自定义属性的形式为： data-* ，在 data- 部分设定名称或者你选定的名称。在HTML5中使用自定义属性，这是唯一有效的方法。因此，如果你想验证网页是否有效可才采用这种方法。当然，项目细节部分决定了自定义属性对你是否有用，以及该将其如何命名。这个示例可适用于不同产品类别的零售网站。自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。添加测试按钮在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中：XML/HTML Code复制内容到剪贴板
inputtype= button value= getattribute onclick= getElementAttribute('product1') /

获取属性：在JavaScript中访问属性最常用的方法是使用 getAttributes ，这也是我们要做的第一步。在页面的head脚本区域添加以下函数：JavaScript Code复制内容到剪贴板
functiongetElementAttribute(elemID){ vartheElement=document.getElementById(elemID); vartheAttribute=theElement.getAttribute('data-product-category'); alert(theAttribute); }
这里，我们为示例增加了alert 值，当然你也可以根据自身需求在脚本中添加。获取数据：你可以使用元素数据集来替代DOM getAttributes ，这或许更有效，尤其是在某种情况下，代码通过多种属性进行迭代，然而，浏览器对数据集的支持依然非常低，所以牢记这一点，此代码与//后面的方法一样可执行相同的进程。//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;
从属性名称开始在数据集中删除 data- ，它仍然包含在HTML中。请注意，如果你的自定义属性名称中有一个连字符，当通过数据访问时这会呈现出camel-case形式，即（ data-product-category 变成 productCategory )。其他模块、函数我们已经获取该属性，脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。JavaScript Code复制内容到剪贴板
theElement.setAttribute('data-product-category','sale'); //datasetversion theElement.dataset.productCategory= sale ; 你也可以使用DOM方法或者数据集来删除某个属性： //DOMmethod theElement.removeAttribute('data-product-category'); //datasetversion theElement.dataset.productCategory=null;
在HTML5中实现自定义属性技术上并不是很复杂，真正困难的是选择使用的方法是否适用于你的项目；如果适用，该如何使其更有效？请记住，现在启用数据集方法作为页面功能还为时尚早，毕竟很多浏览器暂不支持此功能。html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：诺基亚 XHTML 常见问答

下一篇：用HTML5制作数字时钟的教程