0

我的脑袋有问题……请帮我回答这个问题：

是否可以在css中将单个字母添加到字符串中？（我会假设它是通过存储原始字符串并在特定位置添加一个字母）

这是我的代码：

.u_usa{
background-image: url(../images/icons/usa_24.png);
}

我要做的是 onclick 将 css 属性更改为：

.u_usa{
    background-image: url(../images/icons/usa_24t.png);
    }

然后单击时，将其改回（删除“t”）...

问题是我有几个不同的类，我想在上面使用相同的函数，每个类都有不同的背景图像位置。保持不变的是一个图像有一个没有......

我需要一个函数，无论我更改什么类，都能够简单地更改 css 属性中的一个字母（无论哪个类调用该函数）

在此先感谢您，如果您无法通过我的胡言乱语来判断，我已经研究这些问题一段时间了，并且已经修复了除了这一项之外的所有内容。

再次感谢你...

编辑：我想要实现的是创建一个函数，当运行时会进行 css 切换，但对于运行它的任何类都是动态的。我有 60 多个具有背景的不同 div，单击时我想从 css 背景图像 url 的第 4 个到最后一个字符位置添加或删除“t”。

4

5 回答 5

2

您应该使用双类选择器为每个类添加第二条 CSS 规则，例如：

.u_usa {
    background-image: url(../images/icons/usa_24.png);
}

.u_usa.clicked {
    background-image: url(../images/icons/usa_24t.png);
}

然后在您的onclick事件处理程序中，从适当的元素中添加或删除clicked该类。

于 2012-07-18T06:23:33.393 回答
1

有多种方法：

切换类

一个类指定一个背景图像，另一个类指定一个不同的背景图像。找到一个类的所有元素，遍历它们，删除一个类并添加另一个类。对于少于 100 个具有相同类的元素来说，它相当快，但在有更多元素的地方可能会很慢。

根据背景图像选择元素并进行更改

非常慢且计算密集型，对于少量元素来说还可以，但就是这样。

更改样式规则

在适当的样式表中找到样式规则并更改 background-image 属性的值。它更多的代码（如果您必须从头开始编写函数，但我相信您可以找到合适的函数并将其添加到您的代码集合中）。无论您需要修改多少元素，它都非常快。唯一的缺点是它会改变类中的每个元素，除了一些基于逻辑的元素，就像使用 toggle 方法一样。

你的选择。

于 2012-07-18T06:30:03.703 回答
0

首先，您可以使样式内联而不是类。

然后使用下面的代码片段

从正常到“t”图像

var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('.png','t.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;

和反向

var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('t.png','.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;

或者

制作两个不同的类并在每次需要更改背景图像时更改类

document.getElementsByClassName('className')[0].setAttribute('class','newClassName');
于 2012-07-18T06:15:31.143 回答
0

当单击按钮时，我们可以在 JQuery 中使用 addClass 函数来做到这一点。当然，如果没有 javascript，我们就无法做到这一点

于 2012-07-18T06:16:32.323 回答
-2

恐怕用 CSS 是不可能的。您必须使用 javascript，或者更可能使用 jQuery 之类的库来创建该功能。

于 2012-07-18T06:11:53.427 回答