<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            .a{

                color: red;

                font-size: 30px;

            }

            p.active{

                color: blue;

            }

        </style>

    </head>

    <body>

        <p title="小马过河" id="p1" class="a">18岁</p>

        <script type="text/javascript">

            // 如果是自定义的属性,要在文档上能看到,通过setAttribute设置属性

            var p1 = document.getElementById('p1');

            console.log(p1.getAttribute('title'));

            console.log(p1.getAttribute('class'));

            // p1.setAttribute('class','abc');

            // p1.setAttribute('adadad','1321313');

            // console.log(p1.className);

            // console.log(p1.title);

            // p1.abc = 123;

            // console.dir(p1);

            // p1.onclick = function(){

            //     this.className = this.className +' active';

            // }

        </script>

    </body>

</html>

1.1

            var p1 = document.getElementById('p1');

            console.log(p1.getAttribute('title'));

            console.log(p1.getAttribute('class'));

获取属性值  选取的对象.get属性() :      p1.getAttribute('title')

1.2、

// 如果是自定义的属性,要在文档上能看到,通过setAttribute设置属性
var p1 = document.getElementById('p1');

p1.setAttribute('class','abc');
p1.setAttribute('adadad','1321313');
         console.log(p1.getAttribute('class'));
         console.log(p1.getAttribute('adadad'));

对象. set属性(‘键’，‘值’)  可以修改已有属性，可以设置未设置属性，可以自定义属性         p1.setAttribute('class','abc');

1.3、

            var p1 = document.getElementById('p1');

　　　　　　　　console.log(p1.getAttribute('class'));

            p1.class='mcw'

            p1.aaa='bbb'

            console.log(p1.getAttribute('class'));

            console.log(p1.getAttribute('aaa'));

            console.log(p1.class);

            console.log(p1.aaa);

对象.属性设置的属性不能用get属性获得，用对象.属性获得

并且元素行里不显示设置的属性

1.4、增加属性值。（比如添加多个类名）

            p1.onclick = function(){

                this.className = this.className +' active';

            }

点击一下就添加了类属性值,也可以用+=实现

js对属性的操作的更多相关文章

  1. js基础——属性操作

    html属性:属性名——属性值 操作:读 . 写 读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名 例如:var oBtn = document.getElementById('btn1' ...

  2. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  3. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  4. js进阶 11-2 jquery属性如何操作

    js进阶 11-2  jquery属性如何操作 一.总结 一句话总结:jquery中的属性用attr方法表示.jquery中都是方法. 1.jquery中的属性的增删改查操作? 只需要两个方法, at ...

  5. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  6. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  7. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  8. BOM对象，math对象document对象的属性和操作和 事件的基本操作

    Math对象 //该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). m ...

  9. jquery：jqery表单属性 值操作

    重置表单(且清空隐藏域)  $('#myform')[0].reset() ​​ DOM属性相关操作 返回属性值 $(selector).attr(attribute) 设置属性值 $(selecto ...

随机推荐

  1. matlab学习笔记11_2高维数组操作 squeeze，ind2sub, sub2ind

    一起来学matlab-matlab学习笔记11 11_2 高维数组处理和运算 squeeze, ind2sub, sub2ind 觉得有用的话,欢迎一起讨论相互学习~Follow Me squeeze ...

  2. [LeetCode] 712. Minimum ASCII Delete Sum for Two Strings 两个字符串的最小ASCII删除和

    Given two strings s1, s2, find the lowest ASCII sum of deleted characters to make two strings equal. ...

  3. Python 内置函数--range() xrange()

    >>>xrange(8) xrange(8) >>> list(xrange(8)) [0, 1, 2, 3, 4, 5, 6, 7] >>> r ...

  4. （转）面试前必知Redis面试题—缓存雪崩+穿透+缓存与数据库双写一致问题

    背景:redis问题在面试过程中经常被问到,对于常见问题一定不能放过. 面试前必知Redis面试题—缓存雪崩+穿透+缓存与数据库双写一致问题 一.缓存雪崩 1.1什么是缓存雪崩? 如果缓存数据设置的过 ...

  5. k8s 集群 节点状态显示notready

    一般情况下 我们是在maste节点上安装网络插件的,然后在join node 节点,这样导致node节点可能无法加载到这些插件 使用 journalctl -f -u kubelet 显示如下内容 N ...

  6. ADB 常用命令及详解

    1.pull文件 adb pull (文件路径) (想要pull的路径) MacBook-Pro:~ caris$ adb pull /sdcard/Android/data/com.xiwi.log ...

  7. Windows网络命令的相关指令(1)

    1.Ipconfig 该命令可以检查网络接口配置.如果用户系统不能到达远程主机,而同一系统的其他主机可以到达,那么用该命令对这种故障进行判断是有必要的.当主机能到达远程主机但不能到达本网主机时,则表示 ...

  8. TCP粘包和拆包的定义，产生的原因以及解决方案

    TCP粘包:指发送方发送的若干数据包在接收方接收时粘成一团,从接收缓冲区看,后一包数据的头紧接着前一包数据的尾 产生的原因: 1.发送方的原因:TCP默认使用Nagle算法,而Nagle算法主要做两件 ...

  9. [转帖]中兴GoldenDB数据库开始了第一轮中信银行核心业务系统迁移落地

    中兴GoldenDB数据库开始了第一轮中信银行核心业务系统迁移落地 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https:// ...

  10. SpringMVC笔记2

    响应数据和结果视图 返回值分类 1.返回值是String 返回值类型是字符串的,会根据返回的字符串去寻找相对应的jsp页面 @Controller @RequestMapping("/use ...