js獲取classname後修改屬性（js根據classname獲取元素）

本文目錄一覽：

• 1、js 怎麼通過class改變樣式
• 2、js和jq怎麼修改className然後怎麼能對其className操作
• 3、js獲取ClassName後，怎樣設置元素寬度
• 4、現在自學JavaScript，發現無法用JS改變ID裡面的className的屬性，求大神教教我！
• 5、如何使用JavaScript的className屬性改變網頁的樣式？

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和jq怎麼修改className然後怎麼能對其className操作

js修改class的幾種方法：

var div = document.getElementById(‘div’);

// 方法一

div.setAttribute(‘class’, ‘style1 style2’);

// 方法二

div.className = ‘style1 style2’;

jQuery修改Class的方法

var div = document.getElementById(‘div’);

$(‘#div’).attr(‘class’,’style5 style6′);

js獲取ClassName後，怎樣設置元素寬度

並沒有getElementByClassName()這個函數，只有getElementsByClassName()，Element後面有個s，這個返回來是多個節點的集合（因為class名有可能匹配到多個），假設只有1個元素用這個class名，那麼要改變寬度可以：

var a=document.getElementsByClassName(“a”);

a[0].style.width=”500px”;

望採納，謝謝

現在自學JavaScript，發現無法用JS改變ID裡面的className的屬性，求大神教教我！

首先你這段代碼中是存在問題的：使用getElementsByClassName來獲取元素，得到的是記錄集，需要使用循環或者指定的位置如[0]來操作。

其次，你是想知道JavaScript改變id裡面的指定class的樣式最近的方式如下：

將裡面的name為ts的div綁定id，然後獲取該id指定id的classname的方式來改變class樣式，代碼如下：

document.getElementById(“tsid”).className=”tss”;

如何使用JavaScript的className屬性改變網頁的樣式？

網頁的樣式一般都定義在了css的文件中，而JavaScript中的className的屬性能讓css中的樣式動態的應用到網頁的元素上。比如，在css中有樣式.example。代碼如下：

.example {

color: #fff;

font-size 1em;

text-align: right;

}

要用JavaScript動態的應用到網頁上，可以使用如下類似的代碼：

function preparePage() {

//當mainContent元素被點擊，mainContent的樣式將會改變

document.getElementById(“mainContent”).onclick = function() {

//檢查當前mainContent的樣式，若是example，則將樣式取消。

//取消樣式直接將className屬性賦值為空字元串」」就行。

//若mainContent的樣式不是example，則應用example樣式。

if( document.getElementById(“mainContent”).className == “example”) {

document.getElementById(“mainContent”).className = “”;

} else {

document.getElementById(“mainContent”).className = “example”;

}

};

}

window.onload = function() {

preparePage();

}

通過上面的JavaScript代碼，我們可以通過點擊來控制mainContent元素的樣式。上面的代碼是從秒秒學上扣出來的，如果你想要完整的案例，可以在秒秒學的《使用JavaScript美化界面》一章中找到。