何时应该使用CSS和JavaScript控制背景图像的更改？

Question

这更像是一道关于通用实践的问题，而不是特定问题。但我会举一个例子来解释。CSS可以控制很多事情，JavaScript也可以做到相同的事情，但是否有更好的选择？

例子： 在一个导航栏中，我有四个按钮，当与它们相关联的部分可见时，它们被赋予“selected”的类。因此，我可以为每个按钮编写CSS语句（或使用mixin让Sass为我处理）。

#home-butt.selected{
background-image: url(images/home-up.png);}

#about-butt.selected{
background-image: url(images/about-up.png);}

#work-butt.selected{
background-image: url(images/work-up.png);}

#contact-butt.selected{
background-image: url(images/contact-up.png);}

或者我可以用JavaScript编写一些代码来完成相同的操作。 (*我给图像添加了与图像名称匹配的title属性，以便从那里获取)。

title = $(this).attr('title');
$(this).find('img').css("background-image", 
"url(" + 'images/' + (title) + '-up.png' + ")");

我的问题是哪个更好使用呢？使用Javascript只是因为它的代码行数较少吗？还是使用CSS以防JavaScript被禁用？或者这是一个具体情况下没有绝对正确答案的问题？

欢迎各种观点和反驳！

- Jamie Reddish

---

只有在您想要动态更改某些内容时才使用JavaScript（以及当无法使用CSS中的:hover选择器时）。 - Entity Black

Answer 1

回答你关于“哪个更好？”的问题：

请记住，CSS有一个特定的目的，就是为应用程序应用外观。而JavaScript则主要负责应用程序的感觉。在编辑样式时，始终优先考虑使用CSS而不是JavaScript。

只有当您拥有动态应用程序并且需要根据某些未知变量更改样式时，才应该使用JavaScript修改样式。即使在这种情况下，仅使用CSS也可以实现很多功能。

还要记住，您正在使用jQuery。想一想jQuery的构造函数，它是一个CSS选择器。

引入CSS伪类的概念之后，几乎没有什么样式不能通过CSS实现了。

- ddavison

Answer 2

在很多场景中，Javascript的开发使我想要完成的事情更加容易，在其他场景中，CSS也能起到同样的作用。

最终，每种“语言”在Web开发中都有其适当的位置，明智地使用可以增强开发和用户体验。了解这些用途（我建议通过实践学习）并明智地应用。根据我的经验，像“只要存在CSS解决方案就不要使用JS”（改编自原话）这样的铁规则在实际世界中很少是最佳选择。

如果您正在处理布局，请使用CSS；如果您正在创建外观和感觉，请使用CSS；如果您正在进行动画制作，请使用CSS3。

如果您需要附加事件处理程序或响应用户输入，请使用JavaScript。

- Obsivus

Answer 3

通常情况下，您应该使用CSS，因为它比javascript更快。此外，有些用户可能会禁用javascript，如果您的演示依赖于js函数，这些用户将无法看到您的增强展示。

- Mariyan

Answer 4

通常的回答是，尽可能使用CSS，因为它可以在禁用JavaScript时工作，并且您不必处理等待元素在DOM中可用以引用它们的问题。但有时这取决于情况。请记住：

- 根据您更改的选择器或属性，您可能会遇到浏览器兼容性问题。 - 如果像您的示例中更改图像，则可能会看到图像闪烁，而新图像正在加载。您可以通过使用精灵图像或使用JavaScript预加载图像来避免这种情况。

- bfavaretto

Answer 5

作为一般准则，我会使用CSS来进行样式设置，而仅使用JavaScript来“使页面变得活跃”。因此，JavaScript的最佳和最理想用途是添加和删除元素的类 - 这些类是CSS所依赖的。

- Zsolt

Answer 6

在执行这个简单的任务时，加载jQuery库是不必要的，依赖javascript来为img标签应用背景图片也是不必要的。

如果可以在CSS中正确地完成，并且在所有浏览器中工作，则应该在CSS中完成。

Javascript适用于更高级或复杂的任务，这些任务需要交互或动画效果，而CSS不能为所有浏览器提供（由于跨浏览器兼容性问题-请查看caniuse.com）

在您的示例中，如果例如通过javascript动态地给出.selected属性：

makeSelected(elm)
{
document.getElementById(elm).className='selected';
}

如果是我个人的话，我会在CSS中添加.selected的样式，而不是通过JavaScript添加图片。

如果你是根据当前页面来添加.selected，而不是通过JavaScript来实现的话，我建议使用CSS。

- CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Answer 7

我更喜欢使用CSS而不是脚本，主要原因是浏览器兼容性

有很多时候，某个脚本代码在某个浏览器中不兼容（咳咳或者只是IE）

使用CSS，我还没有遇到过这样的问题（碰木头），而且如果有任何问题，CSS的影响不会像脚本那样大，后续代码也不会受到影响。

- user2587132

Answer 8

让我提供我的观点。

个人认为，网站在设计方面不应该有太多的“花哨”的东西。所谓的花哨，指的是悬停效果、背景音乐（绝对不行）或其他“吸引眼球的细节”。所有这些看起来很好，但随后访问者会厌倦这些干扰。

不偏离主要问题。使用CSS/JavaScript进行样式设计。

它们确实是相辅相成的。最好的例子就是Bootstrap库。虽然我个人从未使用过它，但使用CSS和JavaScript可以实现令人惊叹的效果。

因此，我们需要两者来设计出色的网站。CSS有助于基本设计，而为了使网站更具响应性，我们使用JavaScript及其衍生库，如Jquery，来实现所有更精美的外观。

- AnaMaria