jsclass怎麼用,js class用法

本文目錄一覽：

• 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」成功了。