4

这更像是一个一般实践问题,而不是一个特定问题,但我会举一个例子来说明我的意思。有很多事情你可以用 CSS 来控制,你也可以用 Javascript 来做,但是有一个比另一个更好吗?

示例:我在导航中有四个按钮,当它们关联的部分在视图中时,它们被赋予“选定”类。所以我可以为每个按钮写一个 CSS 语句(或者让 Sass 用 mixin 为我做)

#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);}

Orrr 我可以用 javascript 写一些东西来做同样的事情。(*我给图像一个与图像名称相匹配的标题属性,以便它可以从那里拉出)。

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

所以我的问题是哪个更好用?它是javascript,因为它的代码行数更少吗?或者 CSS incase javascript 被禁用?或者这是一个非常情境化的问题,并不总是有正确或错误的答案?

欢迎提出意见和反驳!

4

8 回答 8

5

回答您关于“一个比另一个更好依靠?”的问题。

请记住,CSS 有特定的用途。将外观应用于您的应用程序。另一方面,JavaScript 主要是你的应用程序的感觉。 编辑样式时总是更喜欢 CSS 而不是 JavaScript。

唯一应该使用 JavaScript 修改样式的时候是当您有一个动态应用程序,并且需要根据一些未知变量更改样式时。即便如此,仅使用 CSS 就可以实现很多目标。

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

随着 CSS 伪类的概念的引入,几乎没有什么你不能用 CSS 实现样式方面的。

于 2013-08-08T14:11:30.417 回答
2

在许多情况下,Javascript开发使我想要完成的工作变得更加容易,而CSS也能做到这一点。

” 最后,每种“语言”在 Web 开发中都有其适当的位置,并且明智地使用可以增强开发和用户体验。了解这些用途是什么(我建议体验学习)并明智地应用。根据我的经验,制定这样的规则“当存在 CSS 解决方案时,永远不要使用 JS”(意译)在实际世界中很少是最好的。

如果您正在使用布局,请使用CSS,如果您创建外观使用CSS,如果您制作动画使用CSS3

如果您附加事件处理程序或对用户输入做出反应,请使用JavaScript

于 2013-08-08T14:14:35.200 回答
1

通常你想使用 CSS,因为它比 javascript 快得多。还有一些用户禁用了 javascript,如果它依赖于 js 功能,他们将看不到您的增强演示文稿。

于 2013-08-08T14:12:50.983 回答
1

通常的答案是,尽可能使用 CSS,因为它可以在禁用 JavaScript 的情况下工作,而且您不必处理诸如在引用它们之前等待 DOM 中可用的元素等问题。

但有时这取决于。请记住:

  • 根据您要更改的选择器或属性,您可能会遇到浏览器兼容性问题。

  • 如果您正在更改示例中的图像,您可能会在加载新图像时看到它闪烁。您可以通过使用精灵图像或使用 JavaScript 预加载图像来避免这种情况。

于 2013-08-08T14:15:47.540 回答
1

作为一般的经验法则,我会使用 CSS 来设置样式,而 JavaScript 只是为了“让页面活跃”。

因此,JavaScript 最好和最理想的用法是在元素中添加和删除类——CSS 所依赖的类。

于 2013-08-08T14:38:31.860 回答
0

加载jQuery库来执行这个简单的任务是不必要的,并且依赖 javascript 将背景图像应用于您的 img 标签也是不必要的。

如果它可以在 CSS 中正确完成,并且适用于所有浏览器,那么它应该在 CSS 中完成。

Javascript 用于更高级或更复杂的任务,这些任务需要 CSS 无法为所有浏览器提供的交互或动画(由于跨浏览器兼容性问题 - 请查看 caniuse.com)

在您的示例中,如果.selected属性是由 javascript 动态给出的,例如:

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

那么我仍然会亲自.selected在 CSS 中添加样式,而不是通过 javascript 添加图像。

如果您是.selected根据您所在的当前页面而不是通过 javascript 添加的,那么我建议您使用 CSS。

于 2013-08-08T14:12:33.793 回答
0

我更喜欢 CSS 而不是脚本,主要原因之一是浏览器兼容性

有很多次一个脚本代码或另一个在一个浏览器或另一个浏览器中不兼容(咳嗽或只是 IE)

使用 css 我还没有遇到过这样的问题(touchwood),而且如果有任何问题,CSS 的影响不会像脚本那样大,脚本不会让任何其他以下代码执行。

于 2013-08-08T14:23:49.303 回答
0

让我提供我的意见。

我个人不认为一个网站在设计方面应该有很多“噱头”。我所说的噱头是指悬停效果、背景音乐(绝对不行)或其他“引人注目的细节”。所有这些第一次看起来都不错,但随后游客厌倦了这种分心。

不偏离主要问题。用于样式的CSS/JavaScript

好吧,它们确实携手并进。最好的例子是Bootstrap库。虽然我从未亲自使用过它,但使用 CSS 和 JavaScript 可以实现的效果似乎很神奇。

因此,我们将需要两者来设计壮观的网站。CSS 有助于基本设计并使网站更具响应性,我们使用 JavaScript 及其衍生库(如 Jquery)来获得所有更精美的东西

于 2013-08-08T14:25:50.533 回答