如何设置data属性,如何设置data的值

如何设置data的类型,以及设置data的值

步骤:

首先声明一个参数,参数定义获取html标签名div,如下:

var Div = document.getElementsByTagName(‘div‘)[0];

接下来,我们定义一个data类型data-link;然后在js内通过setAttribute设置属性和值。

Div.setAttribute(‘data-link‘,‘http://www.cnblogs.com/hao5599/‘);

// <div id="my_test" data-link="http://www.cnblogs.com/hao5599/"></div>

刚刚我用setAttribute设置了标签的data数据类型,除了使用setAttribute之外,还可以使用dataset.key来设置data属性和值。

object.dataset.key = value;

Div.dataset.link02 = ‘http://www.cnblogs.com/hao5599‘;

// <div id="my_test" data-link02="http://www.cnblogs.com/hao5599"></div>

my_id.dataset.link03Url = ‘http://www.baidu.com/‘;

//<div id="my_test" data-link03-url="http://www.baidu.com/"></div>

my_id.dataset.UrlDataValue = ‘http://www.google.com/?123‘;

<div id="my_test" data-url-data-value="http://www.google.com/?123"></div>

如何获得元素的data数据值

如何获取data的属性值,就是使用getAttribute,方法如下:

console.log(my_id.getAttribute(‘data-link02‘))     // http://www.cnblogs.com/

data支持哪些类型number、boolean、string。

时间: 2024-10-01 07:30:20

如何设置data属性,如何设置data的值的相关文章

CSS initial 关键字,用于设置 CSS 属性为它的默认值

CSS initial 关键字 实例 设置 <div> 元素内的文本颜色为红色,但是为 <h1> 元素保持最初的颜色: div {color: red; }h1 {color: initial; } 浏览器支持 除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字. Opera 15 之前的版本不支持 initial 关键字. 定义和用法 initial 关键字用于设置 CSS 属性为它的默认值. initial 关键字可用于任何 HTML 元素

jquery data属性 attr vs data

html5的自定义data属性相信大家都不会陌生,有了它你可以绑定所需的数据到指定元素上.然后通过jquery设置.获取数据,简直开心的不行啊.想到设置.获取元素属性值,大家一定首先想到了jquery的.attr()方法,但是你一定知道jquery还有个.data()的方法.本人以前一直萌(傻)萌(傻)哒(的)以为这两个方法在处理data属性过程中实现的效果是一样的,只不过.data()方法官方更推荐使用(看名字就感觉人家是正规军).但后来本人在做项目的过程中发现,这两种方法处理data属性并不

关于data属性的一些常见的处理方式

我们知道在html标签上通用的属性有以下这些: 1.title 2.class 3.id 4.name 5.data-属性名 6.style 这些东西大部分都有其各自的效用,这里就不一一多说. 在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题,而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进

html 5实用特性之data属性

HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置,jquery也提供了支持的支持.这使得data属性特别灵活,也非常强大.有了这样的属性我们能够更加有序直观的进行数据预设或存储

Kendo UI 初始化 Data 属性

初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个  HTML 元素转换成一个 Kendo UI 控制项: $("#datepicker").kendoDatePicker();除了使用 jQuery 插件的方法来初始化方法外,每个 Kendo 控制项还可以通过 data 属性来初始化,此时你需要设置 data 的 role 属性,然后调用 kendo.init 方法.使用初始化 Data 属性的方法在页面上包含有大量 Kendo

data属性

本框架内置组件以及部分插件可以通过data属性来初始化并使用,通常通过data-toggle来调用API(toggle是触发器的意思,例如我们创建一个navtab标签可以通过为a的data-toggle="navtab").如无特殊说明,相关参数也通过data属性传递. data属性无法向JS传递含有大写字母的参数,如果参数是驼峰式(大小写混搭),则需要将大写字母转换为-加小写.如: reloadWarn ---> reload-warn maxAndLevel --->

设置background属性使用selector的时候内置?attr报错的解决方案

当我们设置background属性的时候可以设置background="@color/black" 也可以设置 background="@drawable/selector" 然后selector我们可以这样设置 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk

css3设置边框属性

css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div.border1{ border: 3px solid blue;/*边框大小 实心线 蓝色*/ padding :10px 40px;/* 上下边距 左右边距*/ bac

HTML 5:你必须知道的data属性

原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可以让你给元素自定义数据.这篇文章就是思考怎么更好的使用Data属性. 介绍 HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. 随着网站自身的数据越来越多,一些特