标签中的自定义属性（设置、获取、移除）

最新推荐文章于 2024-06-28 16:42:14 发布
最新推荐文章于 2024-06-28 16:42:14 发布
阅读量6.6k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34708564/article/details/90478710
版权
  1. 获取标签自定义属性的方法（不是DOM元素）：getAttribute(“自定义属性的名字”)；
  2. 设置自定义属性:setAttribute(“属性的名字”,“属性的值”)；
  3. 移除自定义属性:removeAttribute(“属性的名字”)。也可以移除元素自带的属性
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: yellow;
    }
    .cls{
      background-color: green;
    }
  </style>
</head>
<body>
     <input type="button" value="移除自定义属性" id="btn"/>
     <div id="dv" score="10" class="cls"></div>
     
<script>
  document.getElementById("btn").onclick=function () {
    //document.getElementById("dv").removeAttribute("score"); //移除标签的自定义属性
    //document.getElementById("dv").className="";//移除元素的类样式，值没有了，但属性还存在
    document.getElementById("dv").removeAttribute("class"); //也可以移除标签自带的属性，值和属性都移除
  };
</script>

</body>
</html>
  1. 自定义属性的作用：可以用于存储数据
    注意：标签.自定义属性，这是DOM上的属性，不在页面中显示，若没有设置值，结果为undefined
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    ul{
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
<ul id="uu">
  <li score="10">同学A的成绩</li>
  <li score="20">同学B的成绩</li>
  <li score="30">同学C的成绩</li>
</ul>
<script>
  //html标签中有没有什么自带的属性可以存储成绩的----没有
  //本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据
  var list=document.getElementsByTagName("li");
  for(var i=0;i<list.length;i++){
    list[i].onclick=function () {
    //alert(this.score);//点了，DOM就有了score属性，但没有赋值，所以是undefined，他和标签中的score不是同一个东西
      alert(this.getAttribute("score"));
    };
  }
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    ul{
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
<ul id="uu">
 <li score="10">同学A的成绩</li>
  <li score="20">同学B的成绩</li>
  <li score="30">同学C的成绩</li>
</ul>
<script>
  var list=document.getElementById("uu").getElementsByTagName("li");
   for(var i=0;i<list.length;i++){ 
    //自定义属性在DOM对象上,不在标签中,网页中看不到该数据，可以用于存储不想让别人看到的数据
    //list[i].score=(i+1)*10;
    //设置标签中的自定义属性，可以在标签中看到该值
    list[i].setAttribute("score",(i+1)*10); 
    list[i].onclick=function(){
      alert(this.getAttribute("score"));
    };
  }
</script>
</body>
</html>
喵_美
关注
JSP自定义带属性的标签
weixin_44855573的博客
03-20 910
JSP自定义带属性的标签
自定义属性的设置，获取和移除
dwjdj的博客
12-26 2549
本身html标签没有这个属性,自己(程序员)添加的,----自定义属性—为了存储一些数据 设置自定义属性:setAttribute(“属性的名字”,“属性的值”); 获取自定义属性的值:getAttribute(“属性的名字”) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
HTML 标签自定义属性
黄刚的专栏
08-25 4582
HTML标签可以自定义属性，但是我们要考虑其在IE和Firefox下的兼容性问题。input type="text" id="tt" name="mm" value=""  outerAttribute="fdfdfdfdf" />这里的outerAttribute属性是我们自定义的，在javaScript中如何引用这个值呢？可以使用 document.getEle
获取自定义属性值
最新发布
mobolove的博客
06-28 414
/ 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式。element.getAttribute('属性')：主要获取自定义的属性（标准）我们程序员自定义的属性。element.setAttribute('属性','值');主要设置自定义的属性（标准）// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法。element.属性：只能获取内置属性值（元素本身自带的属性）element.setAttribute('属性','值');
HTML - 标签自定义属性
chenjineng的博客
08-20 1万+
html标签中，除了标准的属性名外，还可以自定义属性名，下面看下两种自定义属性的使用 1.自定义属性名 <body> <button desc="this is a button">Click me!</button> <script> var btn = document.querySelector('button') console.log(btn.getAttribute('desc')) // 获取属性值 b
标签自定义属性
qq_62022086的博客
11-27 492
在自定义属性名前面加上data-，获取/赋值都需要通过dataset，这种方式操作更为简单，所有data-*属性都存放在dataset中。
标签上自定义属性的操作
qq_40301211的博客
04-02 516
1.获取自定义属性的值 **语法:**element.getAttribute('属性名')返回对应属性的值 ,如果没有返回null 2.设置自定义属性的值 **语法:**element.setAttribute('属性名', '属性的值')返回undefined 3.移除自定义属性的值 **语法:**element.removeAttribute('属性名')返...
jQuery自定义标签获取ID代码
06-24
在描述中提到的“jQuery自定义标签获取ID代码”，其核心是利用jQuery选择器来定位自定义标签，并获取这些标签的ID。jQuery的选择器非常强大，可以基于ID、类名、属性等多种条件来选取元素。获取ID的方法通常是`$("#...
Javascript——自定义属性操作和移除
mintsolace的博客
07-02 290
在html标签中添加的自定义属性，如果想获取这个属性值，要使用getAttribute(“自定义属性名字”)才能获取 <ul> <li age="25">wyx</li> <li age="29">wxy</li> <li age="43">cxh</li> <li age...
js中获取自定义元素的方法
qq_41624138的博客
08-24 3491
console.log(this.dataset.type); //原生js第一种方法 console.log(this.dataset['type']); //原生js第二种 console.log($(this).data('type')); //jquery console.log($(this).attr("data-type")); //jquery 原生js中获取自定义属性的方法： jQuery: 1.1....
jQuery中的创建元素、追加元素、清空元素内容、自定义属性、获取和设置属性和属性值等
qq_46179813的博客
01-15 727
一、动态创建元素及追加元素 1、DOM中创建元素: （1）.document.write("标签代码");缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉 （2）.innerHTML （3）.document.createElement("标签的名字") 2、jQuery中创建元素的方式: （1）.$("标签的代码") 创建元素的方式.$(“html标签”)可以创建元素 （2）.对象.htm...
HTML5如何添加自定义标签属性(data-自定义属性).zip
01-10
HTML5如何添加自定义标签属性(data-自定义属性).zip
html 标签的自定义属性
wusejiege6的博客
02-23 652
自定义属性是相对于内置属性来说的。 JavaScript 操作 <input type="text" id="txtBox" displayName="123456" /> var obj = document.getElementById("txtBox"); // 读取 obj.getAttribute("displayName"); obj.attributes["displayName"].nodeValue; // 设置 obj.setAttribute("displayName
自定义HTML标签属性
zsczyhua的专栏
01-25 1006
我们做的网站项目，因为时间很急，所以为了快速实现效果，大量采用服务器控件，并将很多处理都放在了服务器端，毕竟有VS.net开发环境，写C#代码是很快的。但因为数据处理集中在了服务器端，所以服务器压力较大；举个简单例子，在新闻列表的地方，当新闻的标题过长时，需要截取，并在原字符后面加上省略号，然后当鼠标碰上去时，显示完整标题；像这个效果，团队中，有些同事是用javascript中实现，而大多
探究HTML标签自定义属性
qq_28134589的博客
07-29 143
HTML标签可以自定义属性，IE，Firefox 以及chrome下的兼容性问题 <div l='s' id='myid' name='wac'> 123 </div> <div id="newTest" myAttr="getAttr"></div> 自定义属性 l myAttr IE浏览器 console.log(document.getElementById('myid').name) 直接赋值而动态产生一个自定义属性： docu
JQuery方法获取自定义标签属性
Tsinbo1314的博客
06-20 6386
第一种方式：通过attr设置或返回被选中元素的属性值； 写法： 结果： 第二种方式：通过data-*设置自定义属性，通过jquery的data()来获取到设置的属性值； 写法： 结果： ...
使用js在IE9中获取标签自定义属性
你若强大，来者不怕
06-25 5090
JScript code function wfMain_DevNodeContextMenu(event) { var ele = event.target || event.srcElement; var devType = ele.devType; alert(devType ); } HTML co
HTML 标签自定义属性的问题
holmes89757的博客
06-15 1513
HTML 标签里可以自定义属性，但要考虑到浏览器兼容性的问题。 写一段 HTML 代码如下： 在这个 标签里，我们自定义了一个属性 “myAttr” ，它的属性值为 “testAttr” 。如果定义一个属性却不使用它，那么这个属性是没有任何意义的。接下来我们在 JavaScript 里来调用这个属性： var test = document.getElementById
JavaScript如何自定义标签属性
热门推荐
Potry Code的博客
08-03 1万+
目录：一、为何要自定义属性？二、自定义属性的2种方式第1种：直接在标签中添加想要的属性第2种：设置自定义属性:setAttribute("属性的名字","属性的值");三、总结: 一、为何要自定义属性？ 因为html原生并没有给我们一些像要的属性，而我们可以给标签添加自己定义的属性，目的是为了存储一些数据。 二、自定义属性的2种方式 第1种：直接在标签中添加想要的属性 例如： <ul id=...
Struts2自定义标签实现权限控制的步骤与示例
在`Component`类中，如果需要处理标签属性，需要定义get()和set()方法来获取和设置这些属性。例如，我们可以定义一个属性来存储用户权限列表，以便在比较时使用。 ```java public class PermissionButtonComponent ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值