js中设置元素class的三种方法小结

转载 2016年08月30日 13:23:35

 一、el.setAttribute('class','abc');
代码如下:

 .abc {
    background: red;
  }
test div
 var div = document.getElementById('d1');
 div.setAttribute("class", "abc");
    IE6/7 : div背景色不是红色
    IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色
    结果:IE6/7不支持setAttribute('class',xxx)方式设置元素的class。
 二、el.setAttribute('className', 'abc')
   
代码如下:
 
  .abc {
    background: red;
    }
test div

    var div = document.getElementById('d1');
    div.setAttribute("className", "abc");

    IE6/7 : div背景色为红色
    IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色不是红色
    结果:IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式设置元素的class。
    很有趣,使用setAttribute的时候第一个参数为class和className的情形在IE6/7和IE8/9/10/Firefox/Safari/Chrome/Opera刚好相反。
三、el.className = 'abc';
  代码如下:
 .abc {
  background: red;
  }
test div
   var div = document.getElementById('d1');
   div.className = 'abc';
    所有浏览器都支持。

原文地址:http://www.shangxueba.com/jingyan/1906397.html




JS 系列一: Javascript 定义类(class)的三种方法

在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象共有的属性和方法。 Javascript语言不支持“类”, 但是可以用一些变通的方法,模拟出“类”。 一...

ES6 类(Class)基本用法和静态属性+方法详解

转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址: ES6 类(Class)基本用法和静态属性+方法详解 JavaScript语言的传统方法是通过构造函数,定义并生成新...
  • pcaxb
  • pcaxb
  • 2016年12月20日 10:37
  • 23638

js修改html中class属性

用到js修改html的class属性值,归纳总结下: 一、获取class属性值 var value = $("div").attr("class"); //这里获取class属性值 var arra...

js获取某元素的class里面的css属性值代码(转)

这篇文章主要介绍了js获取某元素的class里面的css属性值代码,有需要的朋友可以参考一下 用js如何获取div中css的 margin、padding、height、border等。你可能说可以...
  • dragoo1
  • dragoo1
  • 2015年09月01日 09:11
  • 2486

js 给某个div增加class 样式(三种方式)

js 给某个div增加class 样式(三种方式)

js为元素动态增加class样式

div{ border:1px solid #ccc; width:200px; height:200px;}  .a{ background:#900; }  .b{ font-size:30p...

原生JS实现addClass,removeClass,toggleClass

jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.add...
  • LowKeySk
  • LowKeySk
  • 2012年10月12日 11:25
  • 98591

javascript基础 通过修改class来修改样式

function addClassName(element,value) { if(!element.className){ element.className = value...

用javascript修改html元素的class

.testNormal { border:1px solid black; } .testOver { background:#999999; border:1px solid black;...

js中用setAttribute为标签设置class属性

今天用js动态的为标签设置class属性,达到应用不同的class标签来显示不同的样式~发现在IE6和FF下添加class是有些区别的。其基本语法使用如下:object.setAttribute(sN...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js中设置元素class的三种方法小结
举报原因:
原因补充:

(最多只允许输入30个字)