html 新增的data-属性,关于html标签元素的data-*属性

关于这个主题的文章和博客其实已经非常多了，这里并非要重复造轮子，只是看到一些例子稍微有点麻烦，其实也很简单，但是对于一个刚刚入门的人，w3c的例子甚至可能看不懂，这里列出一个最简单不过的小案例以供参考

大牛自然略过，不吝指教

代码如下

Html5 custom data attribute Test

var user = document.getElementsByTagName("div")[0];

if(isIe()){

//如果是ie浏览器这样调用

alert(user.getAttribute('data-name'));

}

else{

//非ie浏览器调用方法

alert(user.dataset['name']);

}

//判断是否是ie，但是在ie10 或者ie11下，实际检测出来的效果是false，这里稍微注意一下即可

function isIe(){

return window.ActiveXObject ? true : false;

}

这足够简单了吧，

1.定义一个div标签，一个属性叫做data-name,  data-  是固定的，后面的随意

2.根据浏览器弹出这个属性的值

jQuery-对标签元素 文本操作-属性操作-文档的操作

一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

javaScript tips —— 标签上的data属性

HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这些属性可以随意添加,随意命名,目的是为元素提供与渲染无关的信息,或提供语义信息. 传统获取方式 'getAttribute' da ...

HTML 标签元素的 align 属性

align 属性规定段落中文本的对齐方式. 有 left  right center  justify 这些参数 left  right center  就是左对齐 右对齐 中间对齐 justify  ...

input标签元素，value属性取值问题，赋值

验证val:

js 获取html5的data属性

我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了

dat ...

webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

JS组件系列——使用HTML标签的data属性初始化JS组件

前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动.

jQuery基础之获取和设置标签元素属性

jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现:

随机推荐

消除类游戏(js版)

最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码总共456行,未经过严格测试 ...

MsSql数据库存储过程加密解密

-------------------------------------------------------------------------------- ------------------- ...

自定义按照index和key访问的List

List用起来比较方便,但是有时候要按照Index来访问List中的对象有些繁琐,所以想是不是扩展一下,既能按照Index来访问,又能按照Key访问. 实现方法: public cl ...

C++中的#pragma 预处理指令详解

源地址:http://blog.csdn.net/roger_77/article/details/660311 在所有的预处理指令中,#pragma 指令可能是最复杂的了,它的作用是设定编译器的状态 ...

Java多线程(九)—— interrupt()和线程终止方式

一.interrupt() 说明 interrupt()的作用是中断本线程.本线程中断自己是被允许的:其它线程调用本线程的interrupt()方法时,会通过checkAccess()检查权限.这有可 ...

java 泛型详解-绝对是对泛型方法讲解最详细的，没有之一

对java的泛型特性的了解仅限于表面的浅浅一层,直到在学习设计模式时发现有不了解的用法,才想起详细的记录一下. 本文参考java 泛型详解.Java中的泛型方法. java泛型详解 1. 概述 泛型在 ...

ASP.NET 网站管理工具

ylbtech-Miscellaneos:ASP.NET 网站管理工具 1. 网站管理工具概述返回顶部 网站管理工具概述 介绍 使用网站管理工具,可以通过一个简单的 Web 界面来查看和管理网站配置. ...

tensorflow 优化图

当我们把训练好的tensorflow训练图拿来进行预测时,会有多个训练时生成的节点,这些节点是不必要的,我们需要在预测的时候进行删除. 下面以bert的图为例,进行优化 def optimize_gr ...

ElasticSearch 2 (24) - 语言处理系列之停用词：性能与精度

ElasticSearch 2 (24) - 语言处理系列之停用词:性能与精度 摘要 在信息检索早期,磁盘和内存相较我们今天的使用只是很小的一部分.将索引空间保持在一个较小的水平是至关重要的,节省每个 ...

Python开发【Django】：ModelForm操作

ModelForm 内容回顾: Model - 数据库操作 - 验证 class A(MOdel): user = email = pwd = Form class LoginForm(Form): ...