js修改div里面的data-*的值

最新推荐文章于 2022-05-09 21:58:33 发布
最新推荐文章于 2022-05-09 21:58:33 发布
阅读量9.5k 收藏 1
点赞数 1
分类专栏： js 文章标签： js修改data-*的值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43072912/article/details/85285274
版权

使用attributes方法存取 data-* 自定义属性的值

// 使用getAttribute获取 data- 属性
var cjzs= document . getElementById ( 'cjzs' ) ;
var c = cjzs. getAttribute ( 'data-to' ) ;
// 使用setAttribute设置 data- 属性
cjzs. setAttribute ( 'data-to' , '3000' ) ;

html5还是np

河下一群鹅
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中动态修改css其中一个属性值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> {{ msg }} [removed] export default { data() { return { msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
HTML自定义属性 data-*
jacklin_01的博客
03-11 1213
在html5中我们可以通过 data-* 来设置我们需要的自定义属性，进行数据存放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> </head> <body> &lt
angularjs-dataservice:angularjs控制器共享数据的示例
05-06
Angular Controller数据共享服务 演示如何使用服务在AngularJS中的控制器之间共享数据，以探索可能的共享解决方案。 这包括： index.html 两个JavaScript文件（一个用于控制器，一个用于服务） CSS文件。 您可以只在浏览器中打开index.html文件。 该页面包含4个div，每个div均由其自己的控制器控制，所有控制器均通过该服务共享数据。 中间的div包含一个嵌套的控制器。 当页面上有多个控制器时，此模式很有用，其中一些控制器需要知道何时更改了由另一个控制器管理的数据。
jquery-data-show-hide:更改复选框单选框或选择字段时显示或隐藏或切换某些内容
05-03
[数据显示]，[数据隐藏]，[数据切换] 一个小巧的jQuery插件，用于在更改复选框/单选框或选择字段时显示或隐藏或切换某些内容。 可用性 bower install jquery-data-show-hide 安装 < script src =" bower_components/jquery/dist/jquery.min.js " > </ script > < script src =" bower_components/jquery-data-show-hide/jquery.data-show-hide.min.js " > </ script > 用法 < div> < label> < input type =" checkbox " name =" checkbox[] " data-show =" #test-content " /> Show </ l
data-explorer-graphql:基于GraphQL的数据浏览器
03-17
基于GraphQL数据API的Data Explorer应用-https: 。 现场演示在这里： : 特征 数据表预览+分页 按任何字段过滤数据 预览过滤的数据 下载各种格式的数据 下载各种格式的过滤数据 发展 确保本地有可用的Data API服务。 要进行设置，请按照说明进行操作。 默认情况下，Data Explorer应用程序期望GraphQL引擎在。 您可以通过在/public/index.html编辑data-api属性来更改它。 安装依赖项并启动应用程序： yarn && yarn start 部署方式 生成应用程序： yarn build 将捆绑包移动到您的站点。 请确保您有div ID为elment root在HTML。 该元素应提供以下属性： data-api api-您的GraphQL API端点，例如https://data-api.com/v1/ 。
HTML5自定义属性 data-
charlie________的博客
05-09 476
HTML5规定可以为元素添加非标准的属性，但是要添加前缀data-,目的是为元素提供与渲染无关的信息，或者提供语义信息。这些信息可以任意添加，随便命名。 例子 const div = document.getElementById('myDiv'); const myName = div.dataset.mayName; // 取得值 div.dataset.myName = 'charlie'; // 设置值 ...
div标签中:data-bd-bind_9 div标签
weixin_39629876的博客
11-29 287
div标签也就是说，一个网页，可以分割成不同的部分，每一个部分都可以放到一个div标签当中。比如说，一个网站的首页，往往会包含头部、轮播图、页面主体、底部等几大部分，这每一个部分，都需要放到div+css布局div就像是一个容器，可以用它来容纳任何东西，因此div也习惯被称为"盒子"。所以说，咱们的网页是由众多的"盒子"嵌套组成的。我们在Chrome浏览器(Chrome浏览器的开发辅助功...
html 对象元素如何获取div 里的data值 原生和jq对象两种获取
hexiaoniao的博客
07-19 3885
这是对象，需要获取到div里的data-id的值 转成jq对象就行了 console.log($(t).data("id")) 2.打印一下当前元素： 获取当前事件元素： t.currentTarget 获取html内的data值： console.log(t.currentTarget.getAttribute("data-id")); 搞定了 ...
HTML中关于data-自定义属性的使用
foryond的专栏
08-12 1994
在 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <
js获取data-*属性值，及赋值
热门推荐
weixin_40030173的博客
05-19 1万+
js获取data-*属性、及设置赋值，此处以a标签为例： <a href="javascript:;" data-id="2020" id="demo0">data0</a> <a href="javascript:;" data-name-id="202005" id="demo1">data1</a> <a href="javascript:;" id="demo2">data2</a> 一、jq获取data属性值的两种方法：
Simple-Two-Way-Data-Binding:一个简单的 JavaScript 模块，通过访问器修改器处理双向数据绑定
06-10
简单双向数据绑定 一个简单的 JavaScript 模块通过访问器修改器处理双向数据绑定，使用全局类来封装功能。 通过 {{}} 表达式定义插值点，输入绑定可以通过数据关系属性定义，该属性可以整理到模块存储中的属性，如果没有定义属性，它将使用输入值作为表达式创建。 例子 var myModule = new globalModel({ template: '<div><h2>Hello {{name}}</h2><input type="text" id="name" value="Bob" data-relation="name" />', renderNode: document.getElementById('someWrapper'), store: { somePresetValue: 'foobar' } }); myModule.set('name',
Vue（基础语法二）
m0_46690290的博客
08-18 106
Vue基础语法样式绑定事件处理器表单自定义指令vue组件组件通信自定义事件样式绑定案列Vue组件案列 样式绑定 样式绑定 1.1 class绑定 使用方式：v-bind:class="expression" expression的类型：字符串、数组、对象 1.2 style绑定 V-bind:style="expression" expression的类型：字符串、数组、对象 事件处理器 事件处理器 事件监听可以使用v-on 指令 2.1 事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰符
Vue.js中scoped引发的CSS作用域探讨
u012443286的博客
10-13 5771
前言 在Vue.js的组件化开发中，常常会对某个组件的style标签加上scoped属性，如&amp;amp;amp;lt;style lang='less' scoped&amp;amp;amp;gt;，这样做的目的在于使这个组件的样式不能轻易在其他地方被有意或无意地修改，以达到封装的目的。值得注意的是，当我们进行组件嵌套时，常常需要修改子组件的默认样式，由组件封装引发的样式修改失效问题常常令人头痛。因此，我们需要深入理解Vue.js组件的...
Bootstrap学习笔记
梨柚的博客
09-25 378
这两天在学习Bootstrap,学过一遍复习后发现有几个组件知识点记得不是很清楚，就自己重新码了一遍加深印象。所以有了这篇笔记~ 涉及知识一、导航条+滚轮监听二、路径导航（面包屑）三、标签页的切换四、巨幕五、进度条六、缩略图七、工具提示八、轮播图九、利用折叠面板实现手风琴效果十、blockquote引用标签整体效果完整源码 一、导航条+滚轮监听 导航条 <div class="navbar navbar-inverse navbar-fixed-top" id="mynav"> <.
JS自定义data-*属性
16个夏天。。。
11-13 9115
这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的.html5 data-*自定义属性 age //js var content= document.getElementById('content'); alert(content.dataset.age)
如何使用JavaScript将数据附加到div？
asdfgh0077的博客
05-29 1216
我正在使用AJAX将数据附加到div元素，我从JavaScript填充div，如何将新数据附加到div而不会丢失div中的先前数据？
JS[Dom操作]自定义属性
TongWu1的博客
11-03 300
自定义属性的操作 1. 设置属性值 element.属性 = ‘值’； 内置属性值 element.setAttribute(‘属性’,‘值’); 自定义属性值 2. 获取属性值 element.属性 内置属性值 element.getAttribute(‘属性’); 自定义属性值 3. 移除属性值 element.RemoveAttribute...
html&css的简单了解
m0_50496669的博客
09-07 1194
html&css html： 常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date） 标签的分类： 单双标签：单标签没有与之对
<div data-v-6be17baa class="swiper"> <div data-v-46db2964 data-v-6be17baa class="swiper-container"> <div data-v-46db2964 class="swiper-image" style="background-image: url('slide01.jpg');"></div> <div data-v-46db2964 class="swiper-paginator"> <span data-v-46db2964 class="paginator-item paginator-current"></span> <span data-v-46db2964 class="paginator-item paginator-current"></span> <span data-v-46db2964 class="paginator-item paginator-current"></span> <span data-v-46db2964 class="paginator-item paginator-current"></span> </div> </div> </div> </div> 实现轮播图
最新发布
06-03
这是一个使用Swiper库实现的轮播图的示例代码，其中 `slide01.jpg` 是轮播图的图片路径。需要先引入Swiper库的JS和CSS文件，并在HTML中添加相应的结构和类名。具体实现步骤如下： 1. 在HTML中添加轮播图容器的结构： ```html <div class="swiper"> <div class="swiper-container"> <!-- 轮播图的图片项 --> <div class="swiper-image" style="background-image: url('slide01.jpg');"></div> <div class="swiper-image" style="background-image: url('slide02.jpg');"></div> <div class="swiper-image" style="background-image: url('slide03.jpg');"></div> <div class="swiper-image" style="background-image: url('slide04.jpg');"></div> <!-- ... 其他图片项 ... --> <!-- 轮播图的分页器 --> <div class="swiper-paginator"> <span class="paginator-item paginator-current"></span> <span class="paginator-item"></span> <span class="paginator-item"></span> <span class="paginator-item"></span> <!-- ... 其他分页器项 ... --> </div> </div> </div> ``` 2. 在CSS中设置轮播图的样式： ```css /* 轮播图容器 */ .swiper { position: relative; width: 100%; height: 100%; overflow: hidden; } /* 轮播图容器 */ .swiper-container { position: relative; width: 100%; height: 100%; } /* 轮播图图片项 */ .swiper-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity .5s ease-in-out; } /* 轮播图当前图片项 */ .swiper-image.swiper-image-active { opacity: 1; } /* 轮播图分页器 */ .swiper-paginator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } /* 轮播图分页器项 */ .paginator-item { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; margin-right: 8px; cursor: pointer; } /* 轮播图当前分页器项 */ .paginator-item.paginator-current { background-color: #333; } ``` 3. 使用Swiper库初始化轮播图： ```js // 初始化Swiper var mySwiper = new Swiper('.swiper-container', { // 循环轮播 loop: true, // 自动播放 autoplay: { delay: 5000, disableOnInteraction: false, }, // 分页器 pagination: { el: '.swiper-paginator', clickable: true, bulletClass: 'paginator-item', bulletActiveClass: 'paginator-current', }, }); // 添加轮播图切换事件 mySwiper.on('slideChange', function() { // 获取当前轮播图的索引 var index = mySwiper.realIndex; // 切换分页器的样式 var paginatorItems = document.querySelectorAll('.paginator-item'); for (var i = 0; i < paginatorItems.length; i++) { paginatorItems[i].classList.remove('paginator-current'); } paginatorItems[index].classList.add('paginator-current'); }); ``` 以上代码实现的轮播图包括了自动播放、分页器、鼠标悬停暂停等功能。可以根据实际需求进行调整和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值