JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

以下内容：

一、获取元素的属性

二、设置元素的属性

三、删除元素的属性

一、获取元素的属性

1-原生JS

  1. 获取属性 .getAttribute("属性")

2-jquery

  1. 获取属性 .attr("属性")

示例代码

  1. /*jq获取属性*/
  2.     var temp = $('.test1').attr('class');
  3. /*js获取属性*/
  4.     var temp = document.getElementById('test1').getAttribute('data');

二、设置元素的属性

1-原生JS

  1. 设置属性 .setAttribute("属性","值")

2-jquery

  1. 设置属性 .attr("属性","值")

实例代码

  1. /*jq设置属性*/
  2.     var temp2= $('.test2').attr('class','test-spe');
  3. /*js设置属性*/
  4.     var temp2= document.getElementById('test2').setAttribute('data','self-name-2');

三、删除元素的属性

1-原生JS

  1. 删除属性 .removeAttribute

2-jquery

  1. 删除属性 .removeAttr

示例代码

  1. /*jq删除属性*/
  2.       var temp = $('.test1').removeAttr('data');
  3. /*js删除属性*/
  4.       var temp = document.getElementById('test1').removeAttribute('data');

以上上面代码实例全部

  1. <!DOCTYPE html>
  2. <html>
  3.      <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>元素属性</title>
  6.         <style>
  7.             * {
  8.                 margin:0;
  9.                 padding:0;
  10.                 list-style:none;
  11.             }
  12.             a{
  13.                 color: #5579ee;
  14.                 cursor: pointer;
  15.             }
  16.         </style>
  17.     </head>
  18.  
  19.     <body>
  20.         <div id="mayouchen" style="width: 500px;margin: 50px auto;">
  21.             <a id="test1" class="test1">元素属性获取(class为test1)</a>
  22.             <p><span>属性名：</span><span class="test1_2"></span></p>
  23.             <br />
  24.             <a id="test2" class="test2">元素属性设置(修改class为test2的值为test-spe)</a>
  25.             <p><span>设置的属性名：</span><span class="test2_2"></span></p>
  26.             <br />
  27.             <a id="test3" class="test3" data="self-name">元素属性删除(删除data属性)</a>
  28.             <p><span>删除属性名：</span><span class="test3_1"></span></p>
  29.         </div>
  30.         <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  31.         <script>
  32.             $('.test1').on('click',function(){
  33.                 /*jq获取属性*/
  34.                 var temp = $('.test1').attr('class');
  35.                 /*js获取属性*/
  36.                 var temp = document.getElementById('test1').getAttribute('class');
  37.  
  38.                 console.log(temp);
  39.                 $('.test1_2').text(temp);
  40.             })
  41.             $('.test2').on('click',function(){
  42.                 /*jq设置属性*/
  43.                 var temp2= $('.test2').attr('class','test-spe');
  44.                 /*js设置属性*/
  45.                 var temp2= document.getElementById('test2').setAttribute('class','test-spe');
  46.  
  47.                 var temp_spe = $('.test-spe').attr('class');
  48.                 $('.test2_2').text(temp_spe);
  49.             })
  50.             $('.test3').on('click',function(){
  51.                 var tempSpe = $('.test3').attr('data');
  52.                 /*jq删除属性*/
  53.                 var temp = $('.test3').removeAttr('data');
  54.                 /*js删除属性*/
  55.                 var temp = document.getElementById('test3').removeAttribute('data');
  56.  
  57.                 console.log(tempSpe);
  58.                 $('.test3_1').text(tempSpe);
  59.             })
  60.         </script>
  61.     </body>
  62. </html>

JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）的更多相关文章

  1. 原生JavaScript支持6种方式获取元素

    一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...

  2. 原生js获取元素非行内样式属性的方法

    获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...

  3. js原生继承几种方式

    js原生继承 js本身并没有继承和类的概念,本质上是通过原型链(prototype)的形式实现的. 1.先写两个构造函数Parent和Child,用于将Child继承Parent function P ...

  4. js 原生JS实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 微信小程序——获取元素的宽高等属性

    微信小程序里面无法像用jquery一样获取到元素的节点.小程序提供了一个wx.createSelectorQuery()来获取元素的相关信息.官方的文档对于它的用法都已经写的很详细了. 我直接上在项目 ...

  6. JS备忘--子父页面获取元素属性、显示时间，iframe之间互相调用函数

    //页面加载完成后执行 $(function () { getHW();}); //当用户改变浏览器大小改变时触发 $(window).resize(function () { setHW(); }) ...

  7. js：表单校验（获取元素、事件）

    1.表单校验步骤 (1)确定事件(submit事件),创建一个函数并和该事件绑定. (2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值). (3)输入的信息合法 ...

  8. jsonrpc.js -- 原生js实现 JSON-RPC 协议

    很早以前就涉及到多端远程调用 api的设计,那时候自己设计了个消息传递回调过程.最近了解了JSON-RPC协议,更正规,就可以自己实现下.逻辑也不复杂,没有限制底层消息传递的方式,可以应用到更多的场景 ...

  9. JS 原生JS 判断滚动条滑动到底部（兼容苹果safari）

    ListenerScoller () { var pageIndex = 1; var startX, startY; document.addEventListener('touchstart',f ...

  10. JS 原生JS 判断滚动条滑动到底部

    window.addEventListener("scroll", function(event) { var scrollTop = document.documentEleme ...

随机推荐

  1. 后端分布式系列：分布式存储－HDFS Client 设计实现解析

    前面对 HDFS NameNode 和 DataNode 的架构设计实现要点做了介绍,本文对 HDFS 最后一个主要构成组件 Client 做进一步解析. 流式读取 HDFS Client 为客户端应 ...

  2. 为学Android，我看了这些书

    刚刚开始新的学习生活时,很容易走错方向,然后,这意味着不知道该学习什么,不知道该怎样学习,很显然,我写下这句话意味着我走过这样的路,为此,就付出了不小的代价,浪费了很多时间.       这篇文章当然 ...

  3. .NET 连接SQL Server2012遇到的连接出错问题解析

    最近在用VS2013编写相关于SQL Server数据库的代码,但是却遇到了艰难的bug问题,那就是在进行连接的时候出现了各种异常. 出错分析 1.首先应该想到的是数据库的相关服务没有开启. 因为默认 ...

  4. Socket编程实践(10) --select的限制与poll的使用

    select的限制 用select实现的并发服务器,能达到的并发数一般受两方面限制: 1)一个进程能打开的最大文件描述符限制.这可以通过调整内核参数.可以通过ulimit -n(number)来调整或 ...

  5. java组播MulticastSocket

    在单播模式中有服务器端和客户端之分,而组播模式与单播模式不同,每个端都是以路由器或交换机做为中转广播站,任意一端向路由器或交换机发送消息,路由或交换机负责发送其他节点,每个节点都是同等的.所以在编程模 ...

  6. python调用数据库并查询

    http://blog.csdn.net/pipisorry/article/details/48024795 python调用数据库命令 conn = sqlite3.connect(". ...

  7. 【翻译】Ext JS最新技巧——2014-9-10

    原文:Top Support Tips Greg Barry:删除网格单元格的焦点 在Ext JS 5.0.1,添加了一些与可访问性和支持ARIA有关的显著改进.虽然鼓励使用这些新增功能,但默认样式可 ...

  8. Dynamics CRM 修改自定义实体名字及属性前缀(架构名称)

    本文章以2013为例(2011同理,4.0比较简单直接在系统设置的自定义中设置即可). 1.设置-->自定义项-->发布者,下图中的红框内的即为需要设置的前缀. 2.设置-->解决方 ...

  9. Android进阶(十七)AndroidAPP开发问题汇总(一)

    首先来看一下猎头公司对于Android方向人才招聘的需求: 猎头公司推荐------资深Java软件工程师(Android方向) 岗位职责: 1.熟悉Java语言,熟悉B/S开发的基本结构 2.能运用 ...

  10. 网站开发进阶(三)Windows NAT端口映射

    Windows NAT端口映射 由于有需求进行端口映射,又不想装乱七八糟的软件,Windows本身自带的路由远程访问配置太麻烦,还要两块网卡,坑爹啊. 其实Windows本身命令行支持配置端口映射,条 ...