如何理解HTML5中的标准属性与自定义属性
这篇文章将为大家详细讲解有关如何理解HTML5中的标准属性与自定义属性,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联公司专注于焉耆网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供焉耆营销型网站建设,焉耆网站制作、焉耆网页设计、焉耆网站官网定制、小程序设计服务,打造焉耆网络公司原创品牌,更为您提供焉耆网站排名全网营销落地服务。
正如 HTML5 语法中所阐述的,元素可以包含属性(attributes)给一个元素设置各种属性(properties)。
有些属性被定义为全局的,可以用在任何元素上,而其他的被定义为元素特有的。所有的属性都有一个名称和一个值,看起来如下面的示例所示。
下面是一个使用 HTML5 属性的例子,演示了如何用名为 class 的属性和值 “example” 标记一个 div 元素:
属性只能在起始标签中指定,绝对不能用在结束标签中。
HTML5 属性不区分大小写,可以全部大写或者混合使用,尽管最常见的约定是始终使用小写。
标准属性
下面列出的属性几乎所有的 HTML5 标签都支持。
属性 | 选项 | 功能 |
accesskey | 用户自定义 | 定义访问元素的键盘快捷键。 |
align | right, left, center | 水平对齐标签。 |
background | URL | 在元素后面设置一个背景图像。 |
bgcolor | 数值,十六进制值,RGB值 | 在元素后面设置一个背景颜色。 |
class | 用户定义。 | 分类一个元素,便于使用级联样式表。 |
contenteditable | true, false | 定义用户是否可以编辑元素的内容。 |
contextmenu | Menu id | 为元素定义上下文菜单。 |
data-XXXX | 用户定义。 | 自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。 |
draggable | true,false, auto | 定义用户是否可以拖动元素。 |
height | 数字值 | 定义表格,图像或表格单元的高度。 |
hidden | hidden | 定义元素是否应该可见。 |
id | 用户定义。 | 命名元素,便于使用级联样式表。 |
item | 元素列表。 | 用于组合元素。 |
itemprop | 条目列表。 | 用于组合条目。 |
spellcheck | true, false | 定义元素是否必须有拼写或错误检查。 |
style | CSS 样式表。 | 给元素定义内联样式。 |
subject | 用户定义 id。 | 定义元素关联的条目。 |
tabindex | Tab number | 定于元素的 tab 键顺序。 |
title | 用户定义。 | 元素的“弹出”标题。 |
valign | top, middle, bottom | HTML 元素内标签的垂直对齐方式。 |
width | 数字值。 | 定义表格,图像和表格单元的宽度。 |
自定义属性
HTML5 还引入了一个新特性,就是可以添加自定义的数据属性。
自定义数据属性以 data- 开头,基于我们的需求命名。下面是一个简单的例子:
...
上面的例子中两个叫做 data-subject 和 data-level 的自定义属性在 HTML5 中是完全有效的。我们还可以使用 JavaScript API 或者在 CSS 中以获取标准属性类似的方式获取它们的值。
在HTML元素中添加自定义属性,通过JavaScript进行访问,如果你之前有尝试过,你会发现,容易忽略标记验证,而HTML5可以为你提供在有效的网页内创建并使用自己的元素属性的功能。
创建HTML5文件:
如果你还没想好要使用哪一个,可以复制下面的代码:
XML/HTML Code复制内容到剪贴板
>
<
html
>
<
head
>
<
script
>
/*functions here*/
script
>
head
>
<
body
>
body
>
html
>
在body中设置自定义元素,在head部分脚本区域利用JavaScript元素进行访问。
创建元素:
首先,添加一些简单的内容和自定义属性以及ID等元素,以便我们能够识别JavaScript示例。
XML/HTML Code复制内容到剪贴板
<
div id="product1" data-product-category="clothing"
>
Cotton Shirt
div
>
正如你所看到的那样,自定义属性的形式为:“data-*”,在“data-”部分设定名称或者你选定的名称。在HTML5中使用自定义属性,这是唯一有效的方法。因此,如果你想验证网页是否有效可才采用这种方法。
当然,项目细节部分决定了自定义属性对你是否有用,以及该将其如何命名。这个示例可适用于不同产品类别的零售网站。
自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素,例如,动画显示功能。如果没有标准的HTML元素,我们建议使用自定义属性。
添加测试按钮
在页面上利用自身的JavaScript元素即可执行事件,前提是将下面的代码添加到页面中:
XML/HTML Code复制内容到剪贴板
<
input type="button" value="get attribute" onclick="getElementAttribute('product1')"
/>
获取属性:
在JavaScript中访问属性最常用的方法是使用“getAttributes”,这也是我们要做的第一步。在页面的head脚本区域添加以下函数:
JavaScript Code复制内容到剪贴板
function getElementAttribute(elemID) {
var theElement = document.getElementById(elemID);
var theAttribute = 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复制内容到剪贴板
//DOM method
theElement.setAttribute('data-product-category', 'sale');
//dataset version
theElement.dataset.productCategory = "sale";
你也可以使用DOM方法或者数据集来删除某个属性:
//DOM method
theElement.removeAttribute('data-product-category');
//dataset version
theElement.dataset.productCategory = null;
在HTML5中实现自定义属性技术上并不是很复杂,真正困难的是选择使用的方法是否适用于你的项目;如果适用,该如何使其更有效?请记住,现在启用数据集方法作为页面功能还为时尚早,毕竟很多浏览器暂不支持此功能。
关于如何理解HTML5中的标准属性与自定义属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站栏目:如何理解HTML5中的标准属性与自定义属性
网页链接:http://pwwzsj.com/article/jgdiep.html