html5教程之HTML5实例教程:HTML5完成自界说属性

只看该作者 · 发表于 2015-1-15 23:09:42

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。破洛洛文章简介：在HTML5中完成自界说属性手艺上并非很庞大，真正坚苦的是选择利用的办法是不是合用于你的项目；假如合用，该怎样使其更无效？请记着，如今启用数据集办法作为页面功效还为时髦早，究竟良多扫瞄器暂不撑持此功效。
HTML5开辟正在热火朝天的举行中，在HTML5中利用自界说属性正渐渐遭到开辟者们的喜爱；别的，它还在Web开辟语义中发扬了主要感化。本文我们将切磋经由过程理论案例来创立和会见HTML5自界说数据属性，包含JavaScript函数。
再利用HTML5前，起首在HTML元素中增加自界说属性，经由过程JavaScript举行会见，假如你之前有实验过，你会发明，简单疏忽标志考证，而HTML5能够为你供应在无效的网页内创立并利用本人的元素属性的功效。

创立HTML5文件：
假如你还没想好要利用哪个，能够复制上面的代码：

<!DOCTYPEhtml>
<html>
<head>
<script>
/*functionshere*/
</script>
</head>
<body>
</body>
</html>
在body中设置自界说元素，在head部分剧本地区使用JavaScript元素举行会见。

创立元素：
起首，增加一些复杂的内容和自界说属性和ID等元素，以便我们可以辨认JavaScript示例。
<divid="product1"data-product-category="clothing">
CottonShirt

</div>
正如你所看到的那样，自界说属性的情势为：“data-*”，在“data-”部分设命名称大概你选定的称号。在HTML5中利用自界说属性，这是独一无效的办法。因而，假如你想考证网页是不是无效可才接纳这类办法。
固然，项目细节部分决意了自界说属性对你是不是有效，和该将其怎样定名。这个示例可合用于分歧产物种别的批发网站。
自界说属性同意你以一种特别的体例使用页面内的JavaScript代码来设置元素，比方，动画显现功效。假如没有尺度的HTML元素，我们倡议利用自界说属性。

增加测试按钮
在页面上使用本身的JavaScript元素便可实行事务，条件是将上面的代码增加到页面中：
<inputtype="button"value="getattribute"onclick="getElementAttribute(product1)"/>
猎取属性：
在JavaScript中会见属性最经常使用的办法是利用“getAttributes”，这也是我们要做的第一步。在页面的head剧本地区增加以下函数：
functiongetElementAttribute(elemID){

vartheElement=document.getElementById(elemID);

vartheAttribute=theElement.getAttribute(data-product-category);

alert(theAttribute);

}
这里，我们为示例增添了alert值，固然你也能够依据本身需求在剧本中增加。

猎取数据：
你可使用元素数据集来替换DOM“getAttributes”，这也许更无效，特别是在某种情形下，代码经由过程多种属性举行迭代，但是，扫瞄器对数据集的撑持仍然十分低，以是切记这一点，此代码与//前面的办法一样可实行不异的历程。
//vartheAttribute=theElement.getAttribute(data-product-category);vartheAttribute=theElement.dataset.productCategory;
附属性称号入手下手在数据会合删除“data-”，它仍旧包括在HTML中。
请注重，假如你的自界说属性称号中有一个连字符，当经由过程数据会见时这会出现出camel-case情势，即（“data-product-category”酿成“productCategory”)。

其他模块、函数
我们已猎取该属性，剧本仍旧能够设置和删除。上面的代码演示了怎样利用尺度的JavaScript模块和数据集来设置属性。
你也能够利用DOM办法大概数据集来删除某个属性：
//DOMmethod

theElement.removeAttribute(data-product-category);
//datasetversion

theElement.dataset.productCategory=null;
停止语：
在HTML5中完成自界说属性手艺上并非很庞大，真正坚苦的是选择利用的办法是不是合用于你的项目；假如合用，该怎样使其更无效？请记着，如今启用数据集办法作为页面功效还为时髦早，究竟良多扫瞄器暂不撑持此功效。
</p>
就在新标准备受瞩目之际，两大网络监督机构却起冲突。

只看该作者 · 发表于 2015-1-17 20:08:19

滚动条)层属性--溢出(visible/hidden/scroll/auto)

只看该作者 · 发表于 2015-1-26 22:39:18

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-2-5 05:36:00

滚动条)层属性--溢出(visible/hidden/scroll/auto)

只看该作者 · 发表于 2015-2-11 07:09:57

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-2 00:45:22

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-11 03:52:40

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-17 22:08:13

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-3-17 22:08:16

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-3-17 22:08:12

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-3-25 07:40:23

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

		自动登录	找回密码
密码			立即注册

[HTML5] html5教程之HTML5实例教程:HTML5完成自界说属性

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子