0

初步研究

我知道使用.css()来获取和设置特定元素的 CSS 规则。我看过一个有这个 CSS 的网站：

body, table td, select {
    font-family: Arial Unicode MS, Arial, sans-serif;
    font-size: small;
}

我从不喜欢Arial Unicode字体。嗯，这是我个人的感觉。所以，我会使用 Chrome 的Style Inspector来编辑Arial Unicode MStoSegoe UI或我喜欢的东西。无论如何，除了使用以下来实现相同的功能之外？

案例一

$("body, table td, select").css("font-family", "Segoe UI");
  • 递归的，性能密集型的。
  • 动态加载时不起作用。

案例二

$('<style>body, table td, select {font-famnily: "Segoe UI";}</style>')
    .appendTo("head");
  • 还有比这更好的方法吗？
  • 创建很多<style>标签！
4

2 回答 2

5

好的，如果：

  • 个人喜好

    然后使用用户样式 CSS。根据优先级，用户样式优先于所有其他样式。接下来是内联样式，然后是!important样式，然后是特异性，然后是默认浏览器样式。如果只是出于个人喜好，请随身携带自定义 CSS 和支持它的浏览器。

  • 你是开发者

    然后不要在 JavaScript 或用户脚本中执行此操作。解决问题并改变这些风格！您只是通过实际使其解析您不想要的内容来使浏览器工作得更多。由于您可以访问代码，因此请更改样式。

    但是，由于您的站点可能是一个公共站点，因此应为每个人设置通用样式。不仅是您在查看该网站。

  • 不是开发商：

    我能想到的最好方法（并且之前已经这样做过*）是从页面中删除外部样式表并用您自己喜欢的修改版本替换它们。那就是复制原始 CSS 文件，更改需要更改的内容，然后通过 JS 通过创建一个<link>外部文件来加载它，或者通过 AJAX 加载内容并将它们放在一个<style>. 然而，这种方法充满了障碍。<link>没有onload事件，因此您不会知道外部 CSS 已加载（尽管有一些巧妙的解决方法），并且 AJAXing CSS 内容意味着您的 CSS 在同一个域中，或者浏览器和服务器支持 CORS。

    另一种方法是让 JS 查看加载的样式表并修改其内容。这是一项 JS 密集型工作，因为 JS 会在一堆 CSS 声明中查找您的定义以进行更改。这是一个更安全的选择，但是，我相信并非所有浏览器都可以遍历 CSS 样式，或者至少在浏览器之间以不同的方式进行。另外，如果你有一个大的样式表，你每次都会解析它。

    正如你所说，.css()将是递归的。是的，因为它将内联样式应用于每个受影响的元素。这在某种意义上是好的，因为内联样式的优先级更高，所以无论使用什么放置.css()，您几乎可以肯定它们会生效。但是，由于它现在涉及 DOM，因此工作量更大。

* 我创建的库不会删除现有样式，它只是加载和卸载使用它的 API 声明的预定义样式

于 2012-11-17T14:29:44.193 回答
1

看一下：

恐怕没有图书馆，我真的很想看一个……

于 2012-11-17T13:46:45.250 回答