1.创建属性

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>动态创建属性</title>

<style>

.democlass{color:blue;}

</style>

</head>

<body>

<ul class="container">

　　<li class="child">Coffee</li>

　　<li class="child">Tea</li>

　　<li class="child">Coffee</li>

　　<li class="child">Tea</li>

</ul>

<script>

/*第一种方法(此方法仅限于css样式)

    var child = document.getElementsByTagName("li")[0];

    child.style.color="red";

*/

/*第二种方法

　　document.getElementsByTagName("li")[0].setAttribute("class","democlass"); 

*/
//第三种方法

    var newStyle=document.getElementsByTagName("li")[1];

    var newAttr = document.createAttribute("class");

    newAttr.nodeValue="democlass";　　//使用value或nodeValue均可

    newStyle.setAttributeNode(newAttr);

</script>

</body>

</html>

getdd[i].className="selected";   //通过数组设置标签直接添加类名

 2.获取属性

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>动态获取属性</title>

<style>

.democlass{

    color:blue;

}

</style>

</head>

<body>

<p id="demo"></p>

<ul class="example">

    <li class="child1">Coffee</li>

    <li class="child2">Tea</li>

    <li class="child3">Coffee</li>

    <li class="child4">Tea</li>

</ul>

<script>

　　　/*第一种方式：返回指定属性名的属性值

      var getAttr=document.getElementsByTagName("li")[0].getAttribute("class");

　　    document.getElementById("demo").innerHTML=getAttr;

     */

    //第二种方式:返回指定属性名的属性值，以Attr对象

　    var getAttr=document.getElementsByTagName("li")[0].getAttributeNode("class").value;

　    document.getElementById("demo").innerHTML=getAttr;

    //二种结果都返回child1

</script>

</body>

</html>

3.删除属性(文字颜色)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>动态删除属性</title>

<style>

.democlass{

    color:blue;

}

</style>

</head>

<body>

<p id="demo"></p>

<ul class="example">

    <li class="child1">Coffee</li>

    <li class="child2 democlass">Tea</li>

</ul>

<script>

    /*第一种方式：删除指定的文字颜色属性

    document.getElementsByTagName("li")[1].removeAttribute("class"); 

    */

    //第二种方式：删除指定的文字颜色属性，并以 Attr Node 对象返回被删除的属性

    var n=document.getElementsByTagName("li")[1];

    var a=n.getAttributeNode("class");

    n.removeAttributeNode(a);

   
　　 /*

    此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式。

    */

</script>

</body>

</html>

如果仅仅只是添加类:document.getElementById("myDIV").classList.add("mystyle")

原生js动态创建、获取、删除属性的几种方式的更多相关文章

  1. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  2. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. js动态创建和删除option

    1.动态创建select function createSelect(){           var mySelect = document.createElement("select&q ...

  4. 原生js动态创建文本内容的几种方式

    1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...

  5. 通过JS动态创建和删除HTML元素

    <script type="text/javascript" language="Javascript"> function InputOnBlur ...

  6. 通过原生js对DOM事件的绑定的几种方式总汇

    在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定:在Ja ...

  7. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  8. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  9. 给js动态创建的对象绑定事件

    1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.ad ...

随机推荐

  1. FastJson格式化Request对象导致的一次异常思考

    一.问题描述: 近期,在环境中出现一个阻塞性的异常“nested exception is java.lang.IllegalStateException: It is illegal to call ...

  2. 零基础一年拿下BAT三家offer

    背景 1.本人本科一本双非垫底的那种,硕士211.本硕电子通信,完全0基础,转行一年. 2.研一上第一学期上课+外派到老师合作公司写MATLAB.去年4月开始学习Java. 起步 1.实话说,刚决定转 ...

  3. HIve实战分析Hadoop的日志

    1.日志格式分析首先分析 Hadoop 的日志格式, 日志是一行一条, 日志格式可以依次描述为:日期.时间.级别.相关类和提示信息.如下所示: -03-06 15:23:48,132 INFO org ...

  4. Http 协议简略

    用户在浏览器中输入一个网址并回车,浏览器会向服务器发送一个http请求,服务器端程序会接受这个请求,并对请求进行相应的处理,然后发送一个回应,浏览器收到回应,再把回应的内容显示到页面,这种请求—相应的 ...

  5. Linux 笔记 - 第十八章 Linux 集群之（二）LVS 负载均衡集群

    一.前言 Linux 集群从功能上可以分为两大类:高可用集群和负载均衡集群.上一篇已经讲解了 HA 高可用集群,此节讲解负载均衡集群. 负载均衡集群(Load Balance Cluseter,简称 ...

  6. JS 延时函数

    function sleep(delay) { var start = (new Date()).getTime(); while((new Date()).getTime() - start < ...

  7. pt-table-sync 配合pt-table-checksum 修复主从不一致

    pt-table-sync 配合pt-table-checksum 修复主从不一致. 先执行下面这条语句,打印出要执行的命令,确认无误后再将  --print  改为  --execute 执行.注意 ...

  8. JAVA设计模式-动态代理(Proxy)示例及说明

    在Mybatis源码解析,一步一步从浅入深(五):mapper节点的解析文章的最后部分,我们提到了动态代理的概念,下面我们就简单了解一下动态代理. 一,概念 代理设计模式的目的就是在不直接操作对象的前 ...

  9. Intellij IDEA 2019 + Java Spring MVC + Hibernate学习笔记(1)

    之前的技术栈一直是围绕.net 做的,现在.net 技术栈的使用越来越少,越来越窄.好多原来的同事都转Java开发了. 最近公司变动,自己需要重新找个坑,压力山大.好多要求Java技术栈的根本没机会进 ...

  10. spring5 源码深度解析----- AOP的使用及AOP自定义标签

    我们知道在面向对象OOP编程存在一些弊端,当需要为多个不具有继承关系的对象引入同一个公共行为时,例如日志,安全检测等,我们只有在每个对象里引入公共行为,这样程序中就产生了大量的重复代码,所以有了面向对 ...