使用JavaScript或jQuery更改CSS规则

时间:2012-11-17 13:42:03

标签: javascript jquery css styles

初步研究

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

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

我从不喜欢Arial Unicode字体。 嗯,这是我的个人感受。所以,我会使用Chrome的样式检查器来编辑Arial Unicode MSSegoe UI或我喜欢的内容。无论如何,除了使用以下内容实现相同的目的之外?

案例I

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

案例II

$('<style>body, table td, select {font-famnily: "Segoe UI";}</style>')
    .appendTo("head");
  • 除此之外还有其他更好的方法吗?
  • 创建了大量<style>代码!

2 个答案:

答案 0 :(得分:5)

好的,如果:

  • 个人偏好

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

  • 您是开发人员

    然后不要在JavaScript或用户脚本中执行此操作。回到问题并改变这些风格!你只是通过实际解析你不想要的东西来让浏览器更有效。由于您可以访问代码,因此请更改样式。

    但是,由于您的网站可能是一个公共网站,因此通常会为每个人设置样式。不只是你在观看网站。

  • 不是开发者:

    我能想到的最佳方式(and already did this before*)是从页面中删除外部样式表,并将其替换为您自己喜欢的 modded 版本。这是获取原始CSS文件的副本,更改需要更改的内容,然后通过为该外部文件创建<link>来通过JS加载它,或者通过AJAX加载内容并将它们放入{{ 1}}。然而,这种方法充满了障碍。 <style>没有<link>事件,因此您不会知道外部CSS已加载(虽然有狡猾的解决方法)和AJAXing CSS内容意味着您的CSS位于同一个域或浏览器中服务器支持CORS。

    另一种方法是让JS查看加载的样式表并修改其内容。这是一个JS工作量更大的工作,因为JS会在一堆CSS声明中查找你的定义。这是一个更安全的赌注,但是,我相信并非所有浏览器都可以遍历CSS样式,或者至少在浏览器中使用不同的样式。另外,如果你有一个大样式表,你每次都要解析它。

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

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

答案 1 :(得分:1)

看看:

我担心没有图书馆,我真的很希望看到一个...