js用class(js用class無法獲取value值)

本文目錄一覽:

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/zh-hant/n/285910.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-22 16:06
下一篇 2024-12-22 16:06

相關推薦

發表回復

登錄後才能評論