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

以下内容：

一、获取元素的属性

二、设置元素的属性

三、删除元素的属性

一、获取元素的属性

1-原生JS

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

2-jquery

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

示例代码

/*jq获取属性*/

    var temp = $('.test1').attr('class');

/*js获取属性*/

    var temp = document.getElementById('test1').getAttribute('data');

二、设置元素的属性

1-原生JS

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

2-jquery

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

实例代码

/*jq设置属性*/

    var temp2= $('.test2').attr('class','test-spe');

/*js设置属性*/

    var temp2= document.getElementById('test2').setAttribute('data','self-name-2');

三、删除元素的属性

1-原生JS

删除属性 .removeAttribute

2-jquery

删除属性 .removeAttr

示例代码

/*jq删除属性*/

      var temp = $('.test1').removeAttr('data');

/*js删除属性*/

      var temp = document.getElementById('test1').removeAttribute('data');

以上上面代码实例全部

<!DOCTYPE html>

<html>

     <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>元素属性</title>

        <style>

            * {

                margin:0;

                padding:0;

                list-style:none;

            }

            a{

                color: #5579ee;

                cursor: pointer;

            }

        </style>

    </head>

    <body>

        <div id="mayouchen" style="width: 500px;margin: 50px auto;">

            <a id="test1" class="test1">元素属性获取(class为test1)</a>

            <p><span>属性名：</span><span class="test1_2"></span></p>

            <br />

            <a id="test2" class="test2">元素属性设置(修改class为test2的值为test-spe)</a>

            <p><span>设置的属性名：</span><span class="test2_2"></span></p>

            <br />

            <a id="test3" class="test3" data="self-name">元素属性删除(删除data属性)</a>

            <p><span>删除属性名：</span><span class="test3_1"></span></p>

        </div>

        <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

        <script>

            $('.test1').on('click',function(){

                /*jq获取属性*/

                var temp = $('.test1').attr('class');

                /*js获取属性*/

                var temp = document.getElementById('test1').getAttribute('class');

                console.log(temp);

                $('.test1_2').text(temp);

            })

            $('.test2').on('click',function(){

                /*jq设置属性*/

                var temp2= $('.test2').attr('class','test-spe');

                /*js设置属性*/

                var temp2= document.getElementById('test2').setAttribute('class','test-spe');

                var temp_spe = $('.test-spe').attr('class');

                $('.test2_2').text(temp_spe);

            })

            $('.test3').on('click',function(){

                var tempSpe = $('.test3').attr('data');

                /*jq删除属性*/

                var temp = $('.test3').removeAttr('data');

                /*js删除属性*/

                var temp = document.getElementById('test3').removeAttribute('data');

                console.log(tempSpe);

                $('.test3_1').text(tempSpe);

            })

        </script>

    </body>

</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. FFmpeg API 变更记录

    最近一两年内FFmpeg项目发展的速度很快,本来是一件好事.但是随之而来的问题就是其API(接口函数)一直在发生变动.这么一来基于旧一点版本的FFmpeg的程序的代码在最新的类库上可能就跑不通了. 例 ...

  2. 1057. Stack (30) - 树状数组

    题目如下: Stack is one of the most fundamental data structures, which is based on the principle of Last ...

  3. 文件夹或者文件比对工具 Beyond Compare

    文件夹或者文件比对工具 Beyond Compare 之前有同事离职了.       没有工作交接.       同事的代码有一部分也没有提交版本库.       结果就是线上的代码和版本库中的文件数 ...

  4. RabbitMQ消息队列（七）：适用于云计算集群的远程调用(RPC)

            在云计算环境中,很多时候需要用它其他机器的计算资源,我们有可能会在接收到Message进行处理时,会把一部分计算任务分配到其他节点来完成.那么,RabbitMQ如何使用RPC呢?在本篇 ...

  5. XML解析之sax解析案例（一）读取contact.xml文件，完整输出文档内容

    一.新建Demo2类: import java.io.File; import javax.xml.parsers.SAXParser; import javax.xml.parsers.SAXPar ...

  6. NDK工具开发Jni,Android studio jni开发

    NDK工具开发JNI 对于JNI的作用,我这边就不详细说明了,百度google 有很多这样的介绍,这边着重详解AS使用NDK工具开发,调C的流程. 1,创建工程 2,创建native方法 //该类的路 ...

  7. SQL2008数据表空间大小查询脚本

    --尽量少用触发器,否则数据库增长很快,特别是关于登陆的数据表字段不要用出发器,一周左右能使得数据库增长1G的空间. --数据库表空间大小查询脚本 IF  EXISTS (SELECT * FROM ...

  8. 敏捷测试（1）--TDD概念

    题记 本系列笔记将从测试人员的角度,总结在百度两年来的测试经验,记录一个完整的基于敏捷流程的验收测试全过程,分享在测试过程中的一些知识和经验,以及自己的一些理念.总结自己,也希望对大家有益. 概念 验 ...

  9. android 面试之listview

    ListView优化一直是一个老生常谈的问题,不管是面试还是平常的开发中,ListView永远不会被忽略掉,那么这篇文章我们来看看如何最大化的优化ListView的性能.· 1.在adapter中的g ...

  10. 【63】关系数据库常用的sql语句总结

    创建表 语法 CREATE TABLE <表名>(<列名> <数据类型>[列级完整性约束条件] [,<列名> <数据类型>[列级完整性约束条 ...