<!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. 一篇文章学会shell脚本

    一.Shell传递参数 #!/bin/bash # 假设在脚本运行时写了三个参数 ..,,则 "(传递了三个参数). echo "-- \$* 演示 --" for i ...

  2. [LeetCode] 34. Search for a Range 搜索一个范围(Find First and Last Position of Element in Sorted Array)

    原题目:Search for a Range, 现在题目改为: 34. Find First and Last Position of Element in Sorted Array Given an ...

  3. [LeetCode] 282. Expression Add Operators 表达式增加操作符

    Given a string that contains only digits 0-9 and a target value, return all possibilities to add bin ...

  4. [LeetCode] 505. The Maze II 迷宫 II

    There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...

  5. jmap使用

    今天写的服务在处理大文件是出现Java heap space错误,因此结识了jmap jmap是JDK自带的一个工具,可以做jvm性能调优 可以生成dump文件,查询finalize执行队列.Java ...

  6. eoj monthly 2019.11

    原题 T1 纸条 题目大意: 给出一个长度为n的字符串,其中m位未知,对于每一位未知的字母,有k个备选字母,最终答案为备选字母按字典序排序后的第x个. 题解: 签到题-- 按照题目意思直接写就可以了. ...

  7. 19.Python略有小成(面向对象Ⅰ)

    Python(面向对象Ⅰ) 一.面向对象初识 回顾面向过程编程与函数式编程 # 面向过程编程 测量对象的元素个个数. s1 = 'fjdsklafsjda' count = 0 for i in s1 ...

  8. CORS和CSRF

    CORS和CSRF 什么是CORS?CORS是一个W3C标准,全称是"跨域资源共享",他允许浏览器向夸源服务器,发出XMLHTTPRequest请求,从而克服了AJAX只能同源使用 ...

  9. Eclipse Block Selection（块选择）快捷键 Alt + Shift + A

    说实话,我暂时还没用过这个快捷键.但是不代表以后我也不会用它. Eclipse 有个地方可以专门查看这些小技巧. Help → Tip of the Day 进入下面这个窗口: 将 Unread on ...

  10. js获取项目名称

    //获取路径 var pathName=window.document.location.pathname; //截取,得到项目名称 var projectName=pathName.substrin ...