18

我正在研究响应式设计，想知道使用 JavaScript 或 CSS 设置元素样式是否更好？CSS 确实更容易维护，我不会争辩，但我更喜欢用 JavaScript 构建对象。也许我为自己做的工作比我应该做的要多，但我觉得我总体上有更多的控制权，我喜欢能够捕捉到屏幕上的每个对象。

我有生成整个页面布局并将其推送到 DOM 的构造函数。没有图像，只有纯 JavaScript 样式和 SVG 图标。

我想知道的是：

  • 什么表现更好？
  • 什么，如果有任何对 JS 或 CSS 的硬件支持？
  • 纯 JavaScript 解决方案是否比使用 CSS Calc() 更好？
  • 什么更便携？
  • 什么更向前兼容？

我倾向于避免使用 jQuery，因为我更感兴趣的是学习是什么让事情现在可以正常工作，所以请只使用纯 JavaScript 和 CSS3。

4

4 回答 4

24

您的样式应该尽可能使用 CSS 来完成。根据您的需要设置不同的类，然后在绝对必要时使用 JS 添加或删除类。

要记住的一件事是，通过 JS 更改样式是一次性更改。通过 Ajax 动态添加的元素不会自动继承样式更改。坚持使用 CSS 的另一个好理由。

请参阅此帖子以获得更多确认我应该通过 JS 还是 CSS 加载响应式设计

如链接中所建议

将有关样式的所有内容放在 CSS 文件中是最佳做法。

HTML => 结构

CSS => 样式

JS => 逻辑

于 2013-10-04T18:38:53.970 回答
19

CSS 是设置 (X)HTML 文档样式的最佳方式。

即使您需要使用原始 JavaScript 或 DOM 或诸如 jQuery 之类的框架来设置文档样式，这也意味着您正在为 CSS 规则赋予值。

规则应该是：

  • 当您可以为可预测的文档设置样式时，请使用纯 CSS - 您也可以增强您的 CSS 并将 CSS 选择器用于一般或复杂的场景 -。

  • 当文档或其部分不可预测或动态创建并且您正在应用淡入淡出或任何其他特殊效果时，请使用 JavaScript/DOM 或 JavaScript 等框架 - 事实上，CSS 3.0 具有过渡，因此可以不用 JavaScript 做很多事情 -。

毕竟，想想用 CSS 可以做多简单的事情，以及使用 JavaScript 有什么样的矫枉过正，并记住它的缺点（非常重要的一点：浏览器兼容性和性能）。

你使用的 CSS 越多，网络就越标准化、跨浏览器、高性能和可维护性。

于 2013-10-04T18:41:32.037 回答
5

UI 应该留给 UI 解决方案 (HTML/CSS)。JavaScript 应该只提供额外的功能。

为了补充这一点（因为您提到了 CSS3），如果您指的是动画和 CSS3 的新增功能（否则可能不可用），您可以使用 javascript——但只能作为后备。（例如，使用 jQueryfadeTo使用 CSS3 创建动画时间轴）。

于 2013-10-04T18:38:35.833 回答
3

使用 JavaScript 应用样式时存在严重的缺点，不仅因为您无法控制特定性，而且速度很慢（正如您所期望的那样），任何.css()涉及类的调用，例如$('.something').css(...)，将 css 应用于该类中存在的元素时间，不是.something未来创造的。

于 2013-10-04T18:48:11.867 回答