html自定义属性及相关操作

最新推荐文章于 2024-02-08 21:26:12 发布
最新推荐文章于 2024-02-08 21:26:12 发布
阅读量3.2k 收藏 3
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhzau1996/article/details/83617833
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>自定义属性</title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<style>
			#two {
				position: relative;
			}
			/*data属性作用于css中*/
			
			#two:hover:after {
				position: absolute;
				left: 300px;
				content: attr(data-attribute);
				color: red;
			}
		</style>
	</head>

	<body>

		<div id="one" my-attribute="myValueOne">标签中自定义属性</div>

		<div id="two" data-attribute="myValueTwo">data前缀的自定义属性</div>

		<div id="three" data-attributeThree="myValueThree">THREE</div>

		<div id="four" data-attribute-four="myValueFour">FOUR</div>

		<div id="five">FIVE</div>

		<div id="six" data-six="myValueSix">SIX</div>
		<script>
			//取自定义属性的属性值
			var valueOne = $("#one").attr("my-attribute");
			console.log(valueOne);

			//H5的data属性
			var valueTwo = $("#two").data("attribute");
			console.log(valueTwo);
			//即使驼峰命名，也需全部小写取值
			var valueThree = $("#three").data("attributethree");
			console.log(valueThree);
			//多个分隔符分开的，采用驼峰取值
			var valueFour = $("#four").data("attributeFour");
			console.log(valueFour);

			//自定义添加属性 attr("属性名","属性值");
			$("#five").attr("data-attribute-five", "myValueFive");
			//移除属性
			$("#six").removeAttr("data-six");
		</script>
	</body>

</html>
忆成风
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全面解析HTML5中的标准属性与自定义属性
09-28
主要介绍了HTML5中的标准属性与自定义属性,文中也谈到了JavaScript操作DOM时访问自定义属性的一些相关知识点,非常推荐,需要的朋友可以参考下
HTML5的自定义属性data-*详细介绍和JS操作实例
12-14
当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。 例如： 复制代码代码如下:<div xss=removed xss=removed xss=removed> </div> 使用attribute方法存取 data-* 自定义属性的值 使用attributes方法存取 data-* 自定义属性的值非常方便： 复制代码代码如下: // 使用getAttribute获取 data- 属性 var user = document . getElementById ( ‘user’ ) ; var userName = plan
HTML5自定义元素：菜单的实现
最新发布
self_powerful的博客
02-08 672
Web 组件的一个关键特性是创建：即由 Web 开发人员定义行为的 HTML 元素，扩展了浏览器中可用的元素集。所以我们可以用自定义元素创造属于我们自己的多样化的元素。
JS操作HTML自定义属性的方法
12-11
本文实例讲述了JS操作HTML自定义属性的方法。分享给大家供大家参考。具体如下： HTML代码如下（其中的displayName为自定义属性）： 代码如下:<input type=”text” id=”txtBox” displayName=”123456″ /> 获取自定义属性值: 代码如下:document.getElementById(“txtBox”).getAttribute(“displayName”); document.getElementById(“txtInput”).attributes[“displayName”].nodeValue 设置自定义属性值: 代码如下
自定义属性与函数自定义属性与函数
hu_xingwei的博客
08-29 341
自定义属性与函数自定义属性与函数
CSS中 自定义属性（变量）详解
明天也要努力的博客
06-04 8607
自定义属性（有时也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。 由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);） 复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。 举例：同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。 自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义
在类中声明属性
kangjacob的博客
02-08 1290
在类中声明属性 这里我们想要强调一个重要的传统Python编码和kivy之间的不同点，以及这个改变的用途。 【做好准备】 我们要记得在python中声明属性的传统形式。通常，如果我们想要在Python中声明一个属性，我们会按照下面的方式来做。 class MyClass(object): def __init__(self): super(MyClass,self).__init__() self._numeric_var = 1 @property ...
Typescript学习笔记
kianagrow的博客
07-20 1028
TypeScript JavaScript 的超集，在 JS 基础之上，为 JS 添加了静态类型支持，提高代码的可读性和可维护性
vue3 的 style 样式的特性
qq_48557089的博客
11-16 1278
scoped属性 定义的 CSS 就只会应用到当前组件的元素上，这样就很好地避免了一些样式冲突的问题。 我们项目中的样式也可以加上如下标签： <style scoped> h1 { color: red; } </style>> 这样，组件就会解析成下面代码的样子。标签和样式的属性上，新增了 data- 的前缀，确保只在当前组件生效。 <h1 data-v-3de47834="">1</h1> <style scoped&g.
React + TypeScript实战（一）设定事件处理函数的参数类型
黑猫几绛的博客
07-17 3654
首先提出需求，给input框绑定一个change事件，打印输入框中每次输入的内容。在设定参数类型的时候，首先想到的就是Event从这个报错信息来看，onChange事件需要的似乎是一个这样类型的处理函数现在先引入这意味着，我们的onChange事件是一个，它自带的event参数类型为，由于这里是一个输入框，所以应该为event设置参数为再来试试，成功获取到了输入内容！接下来给扩展一个功能，如果有很多个输入框，是否可以共用同一个onChange方法呢？......
自定义属性
weixin_54902466的博客
06-20 1388
自定义属性概念作用规范为什么要加 data- 开头语法注意事项代码演示:利用自定义属性完成tab切换 在 HTML 中除了标签的【标准属性】外，开发者还可以给标签【自定义属性】 概念 img的标准属性为src、alt等，但若写一个 data-info 则data-info叫自定义属性 作用 一般用来存储额外数据辅助完成某个功能 规范 自定义属性一律以 data- 开头，后面接名字，且名字中若多个单词用-隔开 例：data-info 、data-label、data-login-name等 为什么要加 dat
07-自定义属性操作.html
02-15
07-自定义属性操作.html
自定义属性的使用
Android_weilai的专栏
06-12 126
自定义组合控件到自定义属性，两者相结合使用呢，适合想学习Android，对自定义属性还不是很熟悉的同学
HTML5中自定义数据属性(2)data-*自定义数据
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-06 891
属性的值时，属性名中的连字符（-）将被转换为驼峰命名法（camelCase）。因此，在上面的示例中，我们使用。属性非常有用，可以用于在HTML元素上存储额外的信息，这些信息可以在JavaScript中进行访问和处理。属性是HTML5中引入的一种自定义数据属性，用于在HTML元素上嵌入自定义数据。属性，分别存储了容器中的项目限制和排序顺序。属性的值，可以使用JavaScript中的。在上面的示例中，我们在一个。在上面的示例中，我们在一个。在上面的示例中，我们在一个。在上面的示例中，我们在一个。
22.自定义属性
potato123232的博客
05-12 876
目录 1获取属性 2设置属性 2.1元素中设置属性 2.2点设置属性 2.3setAttribute()设置 3移除属性值 removeAttribute() 4tab栏切换 5H5自定义属性名称规范 1获取属性 拿到元素对象后，我们可以通过点的方式拿到属性 我们也可以用.getAttribute('属性名')得到属性 我们用点的方式获取内置属性（点获取不了自定义属性），用getAttribute()获取自定义属性 2设置属性 2.......
html5--自定义属性
m0_72694993的博客
10-13 4291
4.在标签上通过data-设置的方法和dateset添加的属性获取属性的方式一样，但是要有一点需要注意。当我们设置属性名的时候如果出现多个字符串即像下边data-set-input这种情况的话，在调用属性的时候需要用驼峰命名。1.直接添加，通过querySelector获取到html元素之后，直接.属性进行初始化就可以为元素添加自定义属性了。2.setAttribute('属性名','属性值')，添加自定义属性并初始化。3.通过dateset方法添加的属性，通过dateser.属性名获取。
jQuery操作属性 (系统属性，自定义属性)
05-31
在 jQuery 中，可以使用 `.attr()` 方法来操作元素的属性，包括系统属性和自定义属性。该方法可以接受一个参数或两个参数。 如果只有一个参数，则表示获取指定属性的值。例如： ```javascript var value = $('#...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值