js用class（js用class无法获取value值）

本文目录一览：

• 1、js 怎么通过class改变样式
• 2、如何在js中调用class的方法调用
• 3、js怎么通过class获取元素
• 4、js 如何控制class？

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