更新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规则属性值

回答

相关问题