本文目录一览：
- 1、如何用js点击class？
- 2、如何在js中调用class的方法调用
- 3、如何用javascript为元素添加class？
- 4、js 如何控制class？
- 5、浅析js class
- 6、js 怎么通过class改变样式
如何用js点击class？
HTML DOM3提供了getElementsByClassName()方法用以根据类名获取元素，但是IE9以下浏览器并不支持。考虑兼容性，可以采用如下思路：获取元素，判断className属性是否为目标类名，是的话即添加onclick事件。
下面实例演示——点击class为test1的a标签弹出提示框:
1、HTML结构
div
a class="test1" href="#"第一项/a
a class="test2" href="#"第二项/a
/div
2、javascript代码
window.onload = function(){
var a = document.getElementsByTagName("a");
for(i=0;ia.length;i++){
if(a[i].className == "test1"){
a[i].onclick = function(){alert(this.innerHTML+"被点击了")}
}
}
}
3、效果演示
如何在js中调用class的方法调用
function fun(){
var _this = this;
//如果函数是用var定义的私有函数，如下
var func1 = function(){ }
//那么类中其他函数都可以直接通过func1()的形式调用
//如果函数是共有的，即用this定义，如下
this.func2 = function(){ }
/*则需要得到func对像的引用，即fun中的this(注意：是fun中的).
然而到了调用者函数（如下的caller）内部时，this指的是caller函数而不再是fun，所以可以考虑在fun中定义一个私有变量 var _this = this 来保证指向的是fun
*/
//例子：在this.caller中调用类中的其他函数
this.caller = function(){
func1();//私有函数直接调用
_this.func2();//公共函数，需要fun的this的指向
}
}
如何用javascript为元素添加class？
以给 body 标签添加 class 为例
通过 jQuery
$( 'body').addClass( 'class1 class2' );
$( 'body' ).removeClass( 'class1 class2' );
支持 classList 的高级浏览器（IE10+，Chrome，Firefox，Safari）
document.body.classList.add( 'class1', 'class2' );
document.body.classList.remove( 'class1', 'class2' );
不支持 classList 的浏览器只能通过 className 来添加
document.body.className += ' cl
[1]直接把样式赋值给className
var odiv=document.getElementById('div1');
odiv.className= div3
//这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉;
[2]使用累加赋值给className
var odiv=document.getElementById('div1');
odiv.className+=" "+div3 //样式和样式之间需要空隙 ，所以加个空字符串隔开
//这样可以得到 class="div2 div3" 可以正常增加，但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式，如果有我们添加的话就会变成累赘 比如class="div2 div3 div3";
[3]检测样式原先之前是否有相同的样式
var odiv=document.getElementById('div1');
function hasClass(element,csName){
element.className.match(RegExp('(\s|^)'+csName+'(\s|$)')); //使用正则检测是否有相同的样式
}
[4]在[3]的基础上我们就可以进行判断性给元素添加样式了
var odiv=document.getElementById('div1');
function hasClass(element,csName){
return element.className.match(RegExp('(\s|^)'+csName+'(\s|$)')); //使用正则检测是否有相同的样式
}
function addClass(element,csName){
if(!hasClass(element,csName)){
element.className+=' '+csName;
js 如何控制class？
script type="text/javascript"
window.onload = function() {
var abcs = document.getElementsByClassName("abc");
for(var i = 0; i abcs.length; i++) {
abcs[i].style.width = "50%";
}
};
/script
注意：上面的代码不支持 IE 6/7，因为 IE 6/7 不支持 getElementsByClassName。
下面的代码支持 IE 6/7，使用 getElementsByTagName 查找 div，再查找 abc
script type="text/javascript"
window.onload = function() {
var divs = document.getElementsByTagName("div");
for(var i = 0; i divs.length; i++) {
var classes = divs[i].className.split(" ");
for(var a = 0; a classes.length; a++) {
if(classes[a] === "abc") {
divs[i].style.width = "50%";
break;
}
}
}
};
/script
浅析js class
在 ES6 规范中，引入了 class 的概念。使得 JS 开发者终于告别了，直接使用原型对象模仿面向对象中的类和类继承时代。
但是JS 中并没有一个真正的 class 原始类型， class 仅仅只是对原型对象运用语法糖。所以，只有理解如何使用原型对象实现类和类继承，才能真正地用好 class。
本质上js中class其实是构造函数的另一种写法，使之更加直观的展现构造器中的各项属性
基本使用
注意点：
(1)constructor是一个构造函数方法，创建对象时自动调用该方法
(2)constructor是类必须的一个属性，少了他类的创建会报错，如果我们不写的话js会给他自动加上
(3)this指的是实例化对象,就相当于构造函数中的this，指向的是当前创建的对象
(4)类中声明函数不需要function关键字，直接函数名即可
(5)方法之间不需要都好分割，加了会报错
因为本质上是构造函数的另一种写法，所以他的使用和一些其他特性都是和构造函数相似的。比如调用都是通过new关键字 并且class也存在prototype这个属性，通过她我们可以给这个类的原型对象定义属性。通过这个类创建出的对象一样会有这个属性
类的继承
子类继承基类后，同名的属性会覆盖掉基类，以上例子中两个类都有sayName函数，但是调用的时候输出的是子类的sayName。
一个构造函数可以使用 super 关键字来调用一个父类的构造函数。
同时类也支持get和set操作
js 怎么通过class改变样式
js通过class改变样式，可以使用Dom的className属性设置元素的样式。完整示例代码如下：
!DOCTYPE html
html
head
meta charset="utf-8"
title测试页面/title
style type="text/css"
.themeCls {
color: #000;
background-color: #f60;
line-height: 25px;
}
/style
/head
body style="background-color:#ccc;"
span id="theme"这是一段测试文本br /用来测试js通过class改变样式/span
script type="text/javascript"
var domTheme = document.getElementById("theme");
theme.className = "themeCls";
/script
/body
/html
具体操作步骤如下：
1、新建一个html文件，命名为t.html。
2、打开t.html。
3、在t.html中写入html结构代码，其中设置需要添加class类的元素的ID为“theme”。代码如下：
!DOCTYPE html
html
head
meta charset="utf-8"
title测试页面/title
/head
body style="background-color:#ccc;"
span id="theme"这是一段测试文本br /用来测试js通过class改变样式/span
/body
/html
4、设置一个css类，命名为”themeCls”，用于在javascript操作时给元素添加clsss。”themeCls”类为了方便观察效果，设置css规则为字体颜色为黑色#000，背景为橙色#f60，行高为25像素。代码如下：
style type="text/css"
.themeCls {
color: #000;
background-color: #f60;
line-height: 25px;
}
/style
5、编写javascript代码，获取ID为“theme”的元素并设置元素的class类为“themeCls”，代码如下：
script type="text/javascript"
var domTheme = document.getElementById("theme");
domTheme .className = "themeCls";
/script
6、打开浏览器，浏览t.html页面，发现页面中”这是一段测试文本用来测试js通过class改变样式”这一段文本字体颜色呈现黑色，背景呈现橙色，说明我们为元素添加class类“themeCls”成功了。