<!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. [LeetCode] 212. Word Search II 词语搜索 II

    Given a 2D board and a list of words from the dictionary, find all words in the board. Each word mus ...

  2. [LeetCode]577. Employee Bonus 员工奖金

    Select all employee's name and bonus whose bonus is < 1000. Table:Employee +-------+--------+---- ...

  3. C# .NET 私钥 RSA2,SHA256,签名

    私钥长度2048 -- /// <summary> /// 生成签名 /// </summary> /// <param name="str"> ...

  4. mybatis对实体的引用必须以 ';' 分隔符结尾

    今天在使用 generate 时(问题起源),由于扫描了mysql所有库下的user表,因此添加参数 nullCatalogMeansCurrent=true 添加改参数解决的原因 查看 但是添加后出 ...

  5. Spring boot使用Aspose.Slides操作ppt转PDF、转图片

    最近要将ppt转为PDF和图片,Apache poi ,jacob都试了下 Apache poi 转图片乱码,处理了,还会存在部分乱码 jacob对系统依赖比较大,必须是windows还得安装MS O ...

  6. 通过cmd命令控制台关闭已经打开的端口号

    通过cmd命令控制台关闭已经打开的端口号 在出现的窗口里面输入 netstat -ano, 就会出现所有的端口号, Local Address下面的是端口号, PID就是某程序占用的进程号, 这个进程 ...

  7. 最新 淘友天下java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.淘友天下等10家互联网公司的校招Offer,因为某些自身原因最终选择了淘友天下.6.7月主要是做系统复习.项目复盘.Leet ...

  8. Postman系列四：Postman接口请求设置环境变量和全局变量、测试沙箱和测试断言、测试集运行与导入数据文件

    一:Postman中接口请求设置环境变量和全局变量 全局变量和环境变量可以通过Pre-request Script和Tests设置,会在下面测试沙箱和测试断言中讲到. 全局变量的设置:官网参考http ...

  9. k8s 使用本地镜像的时候

    k8s默认会从远端拉取镜像,其配置参数imagePullPolicy为Always containers: - name: demo image: image imagePullPolicy: Nev ...

  10. springcloud学习的坑

    一:启动Euerka作为提供者或者消费者时,启动失败报:Process finished with exit code 0 Unregistering application EUREKA-SERVI ...