<!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. RedisTemplate 获取redis中以某些字符串为前缀的KEY列表

    // *号 必须要加,否则无法模糊查询 String prefix = "ofc-pincode-"+ pincode + "-*"; // 获取所有的key ...

  2. 【VS开发】Visual C++内存泄露检测—VLD工具使用说明

    Visual C++内存泄露检测-VLD工具使用说明 一．        VLD工具概述 Visual Leak Detector(VLD)是一款用于Visual C++的免费的内存泄露检测工具.他的 ...

  3. idea创建maven web项目需要注意的一些细节

    在idea中构建maven java web项目,从new project到选择maven骨架到最后finish完成,整个流程完成后,项目基本结构已经出来,但是距一个可以正常开发运行的web项目还有一 ...

  4. laravel 配置自动加载多路由文件

    在 app\Providers\RouteServiceProvider文件下增加方法&注册: 增加之后就可以在routers下建立api文件夹,在里面添加路由了

  5. 对QT多线程以及事件投递的理解

    1.使用QObject子类的movetothread方法 代替 QThread子类的run 实现多线程. 使用原始QThread对象的start方法启动线程==>连接原始QThread对象的st ...

  6. jenkins自动打tag

    思路: 1.手动输入需要tag的版本号,如“build001”,填写svn有权限的密码(账号默认值),填写打tag的说明 2.脚本根据tag的版本号,自动创建目录(版本号为目录名称) 3.将需要打ta ...

  7. PHP设计模式 - 门面模式

    门面模式 (Facade)又称外观模式,用于为子系统中的一组接口提供一个一致的界面.门面模式定义了一个高层接口,这个接口使得子系统更加容易使用:引入门面角色之后,用户只需要直接与门面角色交互,用户与子 ...

  8. Java基础笔试练习（十二）

    1.(C#.JAVA)扩展方法能访问被扩展对象的public成员 A.能 B.不能 答案: A 解析: 翻译一下,子类方法是否能够访问父类中的public成员. 2.如果子类要调用父类的构造函数,则通 ...

  9. 用Python写一个滑动验证码

    1.准备阶段 滑动验证码我们可以直接用GEETEST的滑动验证码. 打开网址:https://www.geetest.com/ ,找到技术文档中的行为验证,打开部署文档,点击Python,下载ZIP包 ...

  10. Nvidia Jetson TX2开发板学习历程（ 2 ）－ 更换pip源，提高下载速度

    通过将pip的源更换为国内源,来提高下载速度,这也将成为今后学习过程下载Python包的基础,建议前期一定要完成! 知名的国内源 清华:https://pypi.tuna.tsinghua.edu.c ...