<!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. Python - Django - 序列化

    app01/__int__.py: import pymysql pymysql.install_as_MySQLdb() app01/models.py: from django.db import ...

  2. 安装tensorflow2.0

    pip install tensorflow==2.0.0 -i https://pypi.tuna.tsinghua.edu.cn/simple import tensorflow as tfpri ...

  3. mybatis:字符串转成数组拼接成SQL

    <foreach item="item" index="index" collection="str.split(',')" open ...

  4. flex布局大全

    有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...

  5. [LeetCode] 499. The Maze III 迷宫 III

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

  6. MinGW离线安装

    今天安装下载MinGW-W64-install.exe安装MinGW试了好几次都失败了 因此决定用离线安装包进行安装 1.下载 下载地址https://sourceforge.net/projects ...

  7. SOC中的DMIPS_GFLOPS_GMACS的含义

    l  DMIPS全称叫Dhrystone MIPS 这项测试是用来计算同一秒内系统的处理能力,它的单位以百万来计算,也就是(MIPS) 上面的意思也就是,这个处理器测整数计算能力为(200*100万) ...

  8. [07]Go设计模式:过滤器模式（FilterPattern）

    目录 过滤器模式 一.简介 二.代码 三.参考链接 过滤器模式 一.简介 过滤器模式(Filter Pattern)或标准模式(Criteria Pattern)是一种设计模式,这种模式允许开发人员使 ...

  9. Knockout.js之初印象

    最近在学Knockout.js,想要把看到的东西用blog记录下来. Knockout.js是一个MVVM的框架,突然想起之前有人问我哪些是MVVM框架?我回答了angular.js和bootstra ...

  10. Netty--索引

    Netty 入门示例 Netty原理架构解析 Netty 基本原理 Netty面试题 阿里的Netty知识点你又了解多少