更新CSS規則屬性值

我有一個html元素，其樣式（使用jquery）與通過其類名稱的背景圖像。更新CSS規則屬性值

當我刪除類的背景圖像保持 - 這不是我所期望或想要的。

的test.html

<div id='log' class='tile'>HELLOWORLD</div>

test.css

.tile{ 
    background: none; 
}

test.js

$('.tile').css("background-image", "url(tile.jpg)"); // We see image 
$('#log').toggleClass('tile'); // We still see image

敲我的頭後，我想我知道發生了什麼。 css被應用於元素 - 而不是'class'。

我該如何定位特定的css規則，使其關鍵值可以更新？

如果這是有道理的。

來源

2012-02-01 zaf

可能重複[更改CSS從Javascript的規則集（http://stackoverflow.com/questions/1409225/changing-a-css-rule-set-from- javascript） – 2012-02-01 15:18:09

另請參閱http://stackoverflow.com/questions/8224527/how-can-i-edit-a-css-rule-in-jquery – 2012-02-01 15:18:59

使用'toggleClass（'tile'）'您正在添加'tile '到現有班級 – mgraph 2012-02-01 15:20:13

如果婉改變「.tile」類的CSS規則，那麼你就可以做到這一點。 There is a post解釋非常好：

function changeBackgroundImage(className, value){ 
     var ss = document.styleSheets; 
     for (var i=0; i<ss.length; i++) { 
      var ss = document.styleSheets; 
      var rules = ss[i].cssRules || ss[i].rules; 
      for (var j=0; j<rules.length; j++) { 
       if (rules[j].selectorText === className) { 
        rules[j].style.backgroundImage = value; 
       } 
      } 
     } 
}

你可以這樣調用：

changeBackgroundImage(".tile","url(tile.jpg)");

來源

2012-02-01 15:23:48 Zakaria

修復你的複製粘貼技能後，它的工作！謝謝。 – zaf 2012-02-01 15:41:02

這不再起作用，關於這一行，FF說「SecurityError：操作不安全」：var rules = ss [i] .cssRules || SS [I] .rules; – PureW 2015-09-20 12:39:23

嘗試刪除tile類，並與BG應用新類：實際上沒有

- 在需要的時候與BG，在不需要的時候應用類 - 無需

來源

2012-02-01 15:16:57 Elen

應該是班級「瓦」，我一直把它看作標題。 :) – Brian 2012-02-01 15:18:21

哈哈=）你是正確的..編輯 – Elen 2012-02-01 15:19:15

有趣的想法....但我現在有一個更直接的解決方案。 – zaf 2012-02-01 15:43:01

在這種情況下無需使用jQuery的。您可以使用普通的舊JavaScript。看看這個教程：

javascriptkit.com - Changing external style sheets using the DOM

來源

2012-02-01 15:17:37

他可能想要切換背景。 – Stefan 2012-02-01 15:25:54

嘗試了第一次，但火狐回來與功能中的錯誤。也許我加載樣式表的方式......？無論如何 - 找到了解決方案。 – zaf 2012-02-01 15:42:35

你不能改變類本身，而無需重新編寫的樣式表聲明，你跟在選擇元素唯一的工作。

嘗試：

$('.tile').css("background-image","none")

來源

2012-02-01 15:18:34

$('#log').toggleClass('tile',true);

來源

2012-02-01 15:18:58 mgraph

什麼也沒有...... – zaf 2012-02-01 15:32:18

我會讓班級爲CSS樣式的背景圖像部分：

.tile {background-image: url('tile.jpg')};

然後在必要時使用jquery刪除類

$('#log').removeClass('tile');

來源

2012-02-01 15:24:37

問題是，您將background-image設置爲覆蓋任何樣式表規則的內聯stlye。切換班級不會有任何影響。

您可以通過樣式表規則設置背景，然後添加一個可移除它的類;

#log { 
    background-image: url(tile.jpg); 
} 
#log.tile { 
    background: none; 
}

或者您可以使用!important作爲;

.tile { 
    background: none !important; 
}

......它可能是相反的方式，但你明白了嗎？ :)

來源

2012-02-01 15:24:57 Stefan

我的設置是動態生成的URL，所以不能硬編碼。 – zaf 2012-02-01 15:45:18

你可以在你的CSS兩類...

.tile{ 
    background: none; 
} 

.tile-w-image 
{ 
    background-image: url(tile.jpg); 
}

，然後使用jQuery只需撥動類...

$("#log").toggleClass('tile').toggleClass('tile-w-image');

我敢肯定，這僅僅是一個有很多方法可以做到這一點。我希望它有幫助。

來源

2012-02-01 15:25:48

僅在運行時才知道背景圖像。它的動態。 – zaf 2012-02-01 15:44:25

你非常接近。這似乎是你添加內聯CSS到你的元素，然後試圖切換類。你應該保持CSS樣式單獨在大多數情況下：

HTML：

<div id='log' class='tile'>HELLOWORLD</div>

的jQuery（我想這應該點擊或其他事件來完成）：

$('#log').toggleClass('tile'); // We still see image

如果「瓦」類已經寫入HTML，然後切換它將刪除它。

CSS：的

.tile{ 
    background-image: url(tile.jpg); 
}

來源

2012-02-01 16:02:42

更新CSS規則屬性值

回答

相關問題