本文目录一览：
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”成功了。
如何在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的指向
}
}
js怎么通过class获取元素
根据你的需求，举例如下：
document.querySelector：获取首个（单个）符合条件元素
document.querySelector(‘.name’); //获取页面上首个class属性中包含name的元素。
document.querySelectorAll：获取全部符合条件元素
document.querySelectorAll(‘.name’); //获取页面上全部class属性中包含name的元素。
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
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285910.html
微信扫一扫 
支付宝扫一扫 