本文目錄一覽:
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