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

最新推荐文章于 2024-01-16 16:42:49 发布
最新推荐文章于 2024-01-16 16:42:49 发布
阅读量258 收藏
点赞数
原文链接：http://www.cnblogs.com/qingqingzou-143/p/6700446.html
版权

一、el.setAttribute('class','abc'); 

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title>setAttribute('class', 'abc')</title> 
<style type="text/css"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div id="d1">test div</div> 
<script> 
var div = document.getElementById('d1'); 
div.setAttribute("class", "abc"); 
</script> 
</BODY> 
</HTML>

 

IE6/7 : div背景色不是红色
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色
结果：IE6/7不支持setAttribute('class',xxx)方式设置元素的class。

 

二、el.setAttribute('className', 'abc') 

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title>setAttribute('className', 'abc')</title> 
<style type="text/css"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div id="d1">test div</div> 
<script> 
var div = document.getElementById('d1'); 
div.setAttribute("className", "abc"); 
</script> 
</BODY> 
</HTML>

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'; 

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title>el.className = 'abc'</title> 
<style type="text/css"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div id="d1">test div</div> 
<script> 
var div = document.getElementById('d1'); 
div.className = 'abc'; 
</script> 
</BODY> 
</HTML>

建议使用：所有浏览器都支持

 

转载于:https://www.cnblogs.com/qingqingzou-143/p/6700446.html

dongjiong0213
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery之过滤元素操作小结
12-12
1：eq(index)方法 用于获取第N个元素，这个元素的位置从0开始算起，语法格式如下：eq(index) 获取第3个表格，并将它的背景色设置为”#FCF”， 代码如下：$(“td”).eq(2).... //选取带有class属性值为sel的input元素，
JavaScript中的类(Class)详细介绍
01-19
在JavaScript中，可以使用类(Class)来实现面向对象编程(Object Oriented Programming)。不过，JavaScript中的类与Java中的有所不同，其相应的定义和使用也不一样。 JavaScript中类的定义 在JavaScript中，所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类；也就是说，JavaScript中的类是一个对象集合的概念，如果两个对象它们的prototype相同，那么它们就属于同一个类；JavaScript中的类甚至都不需要类名。以下面的代码为例： 代码如下: var p = {x:42}; var a = Obj
JavaScript给元素添加class属性
热门推荐
浪里个小胖子
04-27 5万+
注意：element.classList.remove()、element.classList.add() — ie9及以下不兼容 // 移除div的class属性 obj.classList.remove('active'); // 添加class属性值 // 方式一 obj.className += 'new active'; // 方式二 // obj.className =...
js中给元素添加类的方法
小肉包的博客
01-14 1万+
一.原生js中添加类的方法 1.为 <div> 元素添加一个类: document.getElementById("div").classList.add("类名"); 2.为 <div> 元素添加多个类: document.getElementById("div").classList.add("类名1","类名2","类名3",...); 3.为 <div> 元素移除一个类: document.getElementById("div").classList.remov
js中的Class类详解
yjwlike的博客
06-19 3万+
javascript中的类，包括静态属性私有属性继承等等
JavaScript Class类详解
m0_37824255的博客
05-18 1万+
ECMAScript 6 提供了更接近传统语言的写法，新引入的class关键字具有正式定义类的能力。类（class）是ECMAScript中新的基础性语法糖结构，虽然ECMAScript 6类表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的仍然是原型和构造函数的概念，让对象原型的写法更加清晰、更像面向对象编程的语法。
大家看了就明白了css样式中类class与标识id选择符的区别小结
10-30
Css 样式中类 class 与标识 id 选择符的区别小结 Css 样式中类 class 与标识 id 选择符是两个基本的选择符，它们都是用来在 HTML 元素中应用样式的，但是它们之间存在着一些关键的区别。 类选择符（Class) 类选择...
JavaScript基础和实例代码
03-20
JavaScript电子书，包括了JavaScript的大部分知识，可以帮助读者快速入门。内容如下： 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 ...8.4 本章小结
js给元素添加class样式
qq_40576178的博客
11-18 6667
图中，左侧和右侧都需要添加不同的class类样式 结构： <div class="left"> <div class="img_bg leftOne" @click="clickLeft('企业文化')">企业文化</div> <div class="img_bg leftTwo" @click="clickLeft('公司目标')">公司目标</div> <div class="img_bg leftT.
Javascript定义类（class）的三种方法详解
10-24
主要介绍了Javascript定义类（class）的三种方法详解,本文讲解了构造函数法、Object.create()法、极简主义法三种方法,需要的朋友可以参考下
优雅而高效的JavaScript—— Class 和模块化
杜永康的博客
10-18 997
Class 是一种用于创建对象的模板或蓝图。通过 Class，我们可以定义对象的属性和方法，并通过实例化来创建具体的对象。${this// 输出：Hello, my name is John..`);// 输出：Hello, my name is John.在上面的示例中，我们定义了一个名为 Person 的 Class，它有两个属性 name 和 age，以及一个方法 sayHello。通过 new 关键字可以创建 Person 的实例，并调用其方法。
JavaScript之class详解
qq_53109172的博客
04-24 1630
在JavaScript中利用 class 完成面向对象思想开发，对 class 降级到 ES5
ES6中的class类内容详解
酒客的博客
12-19 1892
ES6中的class类 认识class定义类 ​ 我们会发现，按照前面的构造函数形式创建 类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。 在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类；但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已；所以学好了前面的构造函数、原型链更有利于我们理解类的概念和继承关系； ​ 那么，如何使用class来定义一个类呢？–可以使用两种方式来声明类：类声明和类表达式； class Person{ //类声明 } c
【javascript】js中关于Class(类)的介绍和使用
最新发布
qq_2511276124的博客
01-16 1828
类语法有两个组成部分：类表达式和类声明。类声明和类表达式的主体都执行在严格模式下。比如，构造函数，静态方法，原型方法，getter 和 setter 都在严格模式下执行。一个类的类体是一对花括号/大括号 {} 中的部分。这是你定义类成员的位置，如方法或构造函数。constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。一个类只能拥有一个名为“constructor”的特殊方法。如果类包含多个constructor的方法，则将抛出 一个SyntaxError。
JS 之 Class
m0_48237530的博客
03-27 257
定义类有两种主要方式：类声明和类表达式// 类声明// 类表达式类的定义不能提升（也可以这样理解：类提升了，但是在定义之前存放在暂存性死区中，不能使用）函数 VS 类类表达式中的名称是可选的。这个名称只能在类表达式作用域中使用。// 空类// 有构造函数// 有设置函数或获取函数get a() {return "a"// 有静态方法。
js中class基本语法
lian_bingbing的博客
07-10 2万+
Class 的基本语法 简介 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')...
js中class类的基本使用
yy869949908的博客
12-15 4646
class类的基本使用
js中的class类
风天语的博客
01-11 1345
ES6，class，extend，super，minix，js多态
js获取dom class子元素的方法
05-19
可以使用以下两种方法来获取DOM元素的子元素： 1. 使用`querySelectorAll()`方法： ```javascript const parent = document.querySelector('.parent-class'); const children = parent.querySelectorAll('.child-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值