html5中如何使用自定义属性
来源:互联网 发布:参不敏何足以知之读音 编辑:程序博客网 时间:2024/06/17 05:47
自定义属性
再使用HTML5前,首先在HTML元素中添加自定义属性,通过JavaScript进行访问,如果你之前有尝试过,你会发现,容易忽略标记验证,而HTML5可以为你提供在有效的网页内创建并使用自己的元素属性的功能。
创建HTML5文件:
如果你还没想好要使用哪一个,可以复制下面的代码:
01
<!DOCTYPE html>
02
<
html
>
03
<
head
>
04
<
script
>
05
/*functions here*/
06
</
script
>
07
</
head
>
08
<
body
>
09
</
body
>
10
</
html
>
在body中设置自定义元素,在head部分脚本区域利用JavaScript元素进行访问。
创建元素:
首先,添加一些简单的内容和自定义属性以及ID等元素,以便我们能够识别JavaScript示例。
1
<
div
id
=
"product1"
data-product-category
=
"clothing"
>
2
Cotton Shirt
3
</
div
>
正如你所看到的那样,自定义属性的形式为:“data-*”,在“data-”部分设定名称或者你选定的名称。在HTML5中使用自定义属性,这是唯一有效的方法。因此,如果你想验证网页是否有效可才采用这种方法。
当然,项目细节部分决定了自定义属性对你是否有用,以及该将其如何命名。这个示例可适用于不同产品类别的零售网站。
自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素,例如,动画显示功能。如果没有标准的HTML元素,我们建议使用自定义属性。
添加测试按钮
在页面上利用自身的JavaScript元素即可执行事件,前提是将下面的代码添加到
1
<
input
type
=
"button"
value
=
"get attribute"
onclick
=
"getElementAttribute('product1')"
/>
获取属性:
在JavaScript中访问属性最常用的方法是使用“getAttributes”,这也是我们要做的第一步。在页面的head脚本区域添加以下函数:
1
function
getElementAttribute(elemID) {
2
var
theElement = document.getElementById(elemID);
3
var
theAttribute = theElement.getAttribute(
'data-product-category'
);
4
alert(theAttribute);
5
}
这里,我们为示例增加了alert 值,当然你也可以根据自身需求在脚本中添加。
获取数据:
你可以使用元素数据集来替代DOM “getAttributes”,这或许更有效,尤其是在某种情况下,代码通过多种属性进行迭代,然而,浏览器对数据集的支持依然非常低,所以牢记这一点,此代码与//后面的方法一样可执行相同的进程。
1
//var theAttribute = theElement.getAttribute('data-product-category');
2
var
theAttribute = theElement.dataset.productCategory;
从属性名称开始在数据集中删除“data-”,它仍然包含在HTML中。
请注意,如果你的自定义属性名称中有一个连字符,当通过数据访问时这会呈现出camel-case形式,即(“data-product-category” 变成“productCategory”)。
其他模块、函数
我们已经获取该属性,脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。
1
//DOM method
2
3
theElement.setAttribute(
'data-product-category'
,
'sale'
);
4
//dataset version
5
6
theElement.dataset.productCategory =
"sale"
;
你也可以使用DOM方法或者数据集来删除某个属性:
1
//DOM method
2
theElement.removeAttribute(
'data-product-category'
);
3
//dataset version
4
theElement.dataset.productCategory =
null
;
结束语:
在HTML5中实现自定义属性技术上并不是很复杂,真正困难的是选择使用的方法是否适用于你的项目;如果适用,该如何使其更有效?请记住,现在启用数据集方法作为页面功能还为时尚早,毕竟很多浏览器暂不支持此功能。
- html5中如何使用自定义属性
- HTML5新攻略:如何使用自定义属性
- HTML5新攻略:如何使用自定义属性
- 如何使用HTML5自定义数据属性
- 如何使用HTML5自定义数据属性
- 如何使用HTML5自定义数据属性
- 关于HTML5如何自定义属性
- ios中如何使用xib自定义属性
- 在html5中可以自定义属性
- HTML5的自定义属性的使用总结
- HTML5的自定义属性的使用总结
- 如何在android style文件中使用自定义属性
- 如何在android style文件中使用自定义属性
- 如何在android style/layout文件中使用自定义属性。
- 如何在android style文件中使用自定义属性
- 如何在android style文件中使用自定义属性
- 如何在android style文件中使用自定义属性
- 如何在android style文件中使用自定义属性
- Java Graphics_3
- linux编译ACE
- http缓存
- Java Graphics_4
- zoj3129
- html5中如何使用自定义属性
- spring simpleJdbcTemplate oracle库中保存记录,获取主键
- Java Graphics_5
- hibernate一对多关联映射——单向(继。空间不够了)(
- 算法时间复杂度的计算
- NSIS 的 Modern UI 教程
- hibernate一对多关联映射—单向
- Java Graphics_6
- android学习之选择媒体库中的图片