使用JavaScript或jQuery更改CSS规则

Question

初步研究

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

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

我从来不喜欢Arial Unicode这种字体.嗯,那是我个人的感受.所以,我会使用Chrome的样式检查编辑Arial Unicode MS到Segoe UI或者我喜欢的东西.无论如何,除了使用以下实现相同之外？

案例一

$("body, table td, select").css("font-family", "Segoe UI");

• 递归,性能密集.
• 当事物被动态加载时不起作用.

案例二

$('<style>body, table td, select {font-famnily: "Segoe UI";}</style>')
    .appendTo("head");

• 还有比这个更好的方法吗？
• 创建了很多<style>标签!

Answer 1

好的,如果:

• 个人喜好

  然后使用用户样式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声明的预定义样式}