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. 02_NoSQL数据库之Redis数据库：string类型和hash类型

     Strings类型及操作 String是最简单的类型,一个key对应一个Value,String类型是二进制安全的.Redis的String可以包含任何数据,比如jpg图片或者序列化的对象. S ...

  2. android修改HOLO对话框风格

    andriod中修改对话框的风格,可以通过设置theme来实现,部分元素需要通过Java代码来修改,下面以修改对话框的标题为例说明各步骤. 1.编写一个文本样式. DIALOG的标题是一个textvi ...

  3. 利用Dijkstra算法实现记录每个结点的所有最短路径

    最近在做PAT时发现图论的一些题目需要对多条最短路径进行筛选,一个直接的解决办法是在发现最短路径的时候就进行判断,选出是否更换路径:另一个通用的方法是先把所有的最短路径记录下来,然后逐个判断.前者具有 ...

  4. iOS中 UITextView文本视图 技术分享

    UITextView: 文本视图相比与UITextField直观的区别就是UITextView可以输入多行文字并且可以滚动显示浏览全文. UITextField的用处多,UITextView的用法也不 ...

  5. outlook邮箱邮件与企业邮箱同步(outlook本地文件夹邮件，web邮箱里没有)

    用惯了outlook2010, 问题:今天将邮件放到自定义文件夹后,发现在web邮箱中看不到邮件了.不能同步到企业邮箱. 解决忙了一天,才知道是账户类型问题,pop3类型,只下载不上传.所以outlo ...

  6. ARM v7汇编与相关练习

    程序入口: _startc 语言入口: main@:              注释;main:           标签;伪指令:         给汇编器读的指令;.global main    ...

  7. Ubuntu 14 安装WPS

    在32位Ubuntu 14.04 安装 WPS,WPS For Linux版除延续Windows版相同体验外,更加尊重Linux用户特定的使用习惯:深度兼容:自带方正字体集:在线模板和素材使文档创作更 ...

  8. JSP判断移动设备

    日期: 2014年3月6日 人员::铁锚 看到了一篇很好的文章, <在天猫,前端做什么?>,里面有天猫php判断移动设备的正则(个人猜测),觉得很好用,于是就决定移植到JSP里面. jsp ...

  9. AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

    在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

  10. ITU-T Technical Paper： 测量QoS的基本网络模型

    本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...