我知道使用.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>
代码!答案 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)
看看:
我担心没有图书馆,我真的很希望看到一个...