我们可以在css“背景”中使用“javascript”代码吗？ [复制]答案

【问题标题】：can we use "javascript" codes in css "background"? [duplicate]我们可以在css“背景”中使用“javascript”代码吗？ [复制]
【发布时间】：2012-05-27 08:38:22
【问题描述】：

可能重复：
Using Javascript in CSS

是否可以在 css background 中使用 javascript 代码？
意思是这样的：

style="background:url(javascript:---javascript 代码---);" 这种语法是否有效？

提前致谢

【问题讨论】：

真的非常感谢 - 这很有趣。
我在 FF 3 和 IE 8 中测试它 -> 不起作用。
请不要投票关闭 -> 这里有 3 个不错的答案...

标签： javascript css background

【解决方案1】：

使用 JavaScript 访问样式属性

您不能在您的 CSS 中使用 JavaScript，但您可以使用 JavaScript 设置您的 CSS 规则。例如：

// Create CSS BackgroundImage Rule
var bg = "url('http://placekitten.com/200/300)";

// Apply Rule
document.getElementById("foo").style.backgroundImage = bg;

在 CSS 中使变量和函数成为可能

此外，还有一系列框架和工具允许您在 CSS 中使用函数和变量，例如 SASS 或 LESS。

IE 的旧（自 2008 年以来已死）动态属性

最接近 JavaScript in 你的 CSS 将是 Dynamic Properties（在 IE5 中引入），它对跨浏览器的支持很差，在现代是 no longer supported IE 版本。

使用 jQuery 快速轻松地修改 CSS

如果您需要使用 JavaScript 对您的样式进行大量修改，总的来说，人们正在转向采用框架来帮助您解决这个问题。例如，一种流行的框架是 jQuery，它允许以下内容：

$("#foo").css('background-color', 'red');

以及通过对象的质量分配：

var color  = "#ffe", 
    border = "5px solid #ccc";

$("#foo").css({ 'background-color': color, 'border-left': border });

【讨论】：

嗨，谢谢...那么 Kolink 的回答是什么？
@MoonLight 那将是我的回答中提到的动态属性。它不是一个广泛支持的功能，因此您应该避免使用它。

【解决方案2】：

你不能在 CSS 中使用 JavaScript。但是，如果你想使用 JavaScript 更改背景图片，下面这行就可以了，

document.getElementById("<element ID>").style.backgroundImage = "url(<url of image>)";

【讨论】：

【解决方案3】：

技术上是的，用一个表达式：

background: expression(JS code resulting in a vali background image string here)

但我认为它只适用于 IE，这是一种非常糟糕的做法，因为它可能必须每秒重新评估代码数百次。

相反，您应该在那里有一个合适的默认值，然后稍后在页面上使用 JavaScript 来更改它。

【讨论】：

感谢您的回答/请您举一个可行的例子！
需要注意的是，表达式从 2008 年开始就不再支持，并且在现代版本的 IE 中也不起作用。我无意冒犯，但我对这是接受答案这一事实感到困惑。
@JonathanSampson 我也没想到它会成为公认的答案。老实说，我希望它会发表评论......但如果它是用于计算机在旧 IE 上的 Intranet（就像许多公司的不幸情况一样），那么它是完美的。
@Kolink 这将是一种情况，尽管我不认为它完美，因为它进一步巩固了他们在未来任何时候都无法升级他们的浏览器:)