js獲取樣式名稱_如何javascript獲取css中的樣式

㈠ js腳本:jquery 如何動態添加、刪除class樣式方法介紹

取與設置樣式獲取class和設置class都可以使用attr()方法來完成。例如使用attr()方法來獲取p元素的class，JQuery代碼如下：復制代碼代碼如下:var p_class = $("p").attr("class"); //獲取p元素的class[html]使用attr()方法來設置p元素的class，JQuery代碼如下：[code]1 $("p").attr("'class", "high"); //設置p元素的class為 "high"
大多數情況下，它是將原來的class替換為新的class，而不是在原來的基礎上追加新的class。
2 .another{ font-style:italic; color:blue; }
後在網頁中添加一個「追加class類」的按鈕，按鈕的事件代碼如下：
1 $("#btn_3").click(function(){
2 $("#nm_p").addClass("another"); // 追加樣式3 });後當單擊「追加class類」按鈕時，p元素樣式就會變為斜體，而先前的紅色字體也會變為藍色。此時p元素同時擁有兩個class值，即"high"和"another"。在CSS中有以下兩條規定。
1.如果給一個元素添加了多個class值，那麼就相當於合並了它們的樣式。 2.如果有不同的class設定了同一樣式屬性，則後者覆蓋前者。在上例中，相當於給p元素添加了如下樣式：復制代碼代碼如下:1 color : red; /* 字體顏色設置紅色*/
2 font-style:italic;
3 color:blue;
以上的樣式中，存在兩個「color」屬性，而後面的「color」屬性會覆蓋前面的「color」屬性，因此最終的「color」屬性的值為「blue」，而不是「red」。
移除樣式如果用戶單擊某個按鈕時，要刪除class的某個值，那麼可以使用與addClass()方法相反的removeClass()方法來完成，它的作用是從匹配的元素中刪除全部或者指定的class。例如可以使用如下的JQuery代碼來刪除p元素中值為「high」的class:復制代碼代碼如下:1 $("p").removeClass("high"); //移除p元素中值為"high"的class
果要把p元素的兩個class都刪除，就要使用兩次removeClass()方法，代碼如下：
1 $("p").removeClass("high").removeClass("another");
Query提供了更簡單的方法。可以以空格的方式刪除多個class名，代碼如下：
1 $("p").removeClass("high another");
外，還可以利用removeClass()方法的一個特性來完成同樣的效果。當它不帶參數時，就會將class的值全部刪除，JQuery代碼如下：
1 $("p").removeClass(); //移除p元素的所有class
換樣式 JQuery中有一個方法toggle()，JQuery代碼如下：
1 toggleBtn.toggle(function(){
2 //元素顯示代碼③
3 }, function(){
4 //元素隱藏代碼④5 })oggle()方法此處的作用是交替執行代碼③和代碼④兩個函數，如果元素原來是顯示的，則隱藏它：如果元素原來是隱藏的，則顯示它。此時，toggle()方法主要是控制行為上的重復切換。
另外JQuery還提供了一個toggleClass()方法控制樣式上的重復切換。如果類名存在則刪除它，如果類名不存在則添加它。例如對p元素進行toggleClass()方法操作。
復制代碼代碼如下:1 $("p").toggleClass("another"); //重復切換類名「another」
不斷單擊「切換樣式」按鈕時，p元素的class的值就會在「myClass」和「myClass another」之間重復切換。
判斷是否含有某個樣式 hasClass()可以用來判斷元素中是甭含有某個class，如果有，則返回true，否則返回false。例如可以使用下面的代碼來判斷p元素中是否含有「another」的class：復制代碼代碼如下:1 $("p").hasClass("another");
個方法是為了增強代碼可讀性面產生的。在JQuery內部實際上是調用了is()方法來完成這個功能的．該方法等價於如下代碼：復制代碼代碼如下:view sourceprint? 1 $("p").is(".another"); //is("."+class);

㈡如何javascript獲取css中的樣式

1 Javascript獲取頁面的元素的樣式常見的兩個方法是 document.getElementById(),document.querySelector("");方法。

2 在下面的實例中是使用Javascript來改變標簽的背景顏色，使用的是document.querySelector()方法。代碼可以直接復制到瀏覽器上面運行；document.querySelector("#demo").style.background = "red";是獲取元素，使用css改變標簽的北京顏色；<button onclick="myFunction()">點我</button>是點擊事件觸發，點擊之後有相應的代碼執行。

<!DOCTYPE html>

<html>

<head>

<title>javascript改變背景顏色</title>

</head>

<body>

function myFunction() {

document.querySelector("#demo").style.background = "red";

}

</script>

</body>

</html>

3 案例載入之後的頁面效果截圖：

㈢通過JS可以直接調用一個CSS樣式表名來對HTML元素進行外觀設置嗎

可以的，例子如下：

#div1 {

width: 200px;

height: 200px;

background-color: red;

}

#div1.aa {

border-radius: 50%;

background-color: #000;

}

js部分可以用：

obj.className = 'aa' 這樣就可以將aa的樣式加到div上了。

寫css樣式的時候需要注意的是，由於id的優先順序高，所以如果想在class里覆蓋id里的樣式，需要給#div1.aa寫樣式。

導航:首頁 > 編程語言 > js獲取樣式名稱

js獲取樣式名稱

與js獲取樣式名稱相關的資料

友情鏈接