使用JavaScript或jQuery更改CSS规则 [英] Changing CSS Rules using JavaScript or jQuery

问题描述

我知道使用 .css（） 来获取和设置特定元素的CSS规则。我看到一个网站与这个CSS：

I am aware of using .css() to get and set the CSS rules of a particular element. I have seen a website with this CSS:

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

我从来不喜欢 Arial Unicode 作为字体。因此，我会使用Chrome的样式检查器编辑 Arial Unicode MS ，以便 Segoe UI 或我喜欢的东西。

I never liked Arial Unicode as a font. Well, that was my personal feel. So, I would use Chrome's Style Inspector to edit the Arial Unicode MS to Segoe UI or something which I like. Is there anyway, other than using the following to achieve the same?

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

• 递归，性能密集。

<


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







• 比这更好的方法吗？


• 创建大量< style> 标签！


• Any other better method than this?
• Creates a lot of <style> tags!

推荐答案

确定，如果：




• 个人偏好

• Personal Preference

然后使用用户样式CSS。根据优先级，用户样式优先于所有其他样式。接下来是inline-styles，然后是！important 样式，然后是特殊性，然后是默认的浏览器样式。

Then use user styles CSS. According to priority, user styles takes precedence above all other styles. Next comes inline-styles, then !important styles, then specificity, then default browser styles. If it's just for personal preference, pack-up a custom CSS with you and a browser that supports it.

您是开发人员

然后不要在JavaScript或用户脚本中执行此操作。下到问题，改变这些样式！你只是让浏览器工作更多，实际上使它解析你不想要的东西。

Then don't do this in JavaScript or user scripts. Go down to the problem and change those styles! You are just making the browser work more by actually making it parse stuff you don't want. Since you have access to the code, change the styles instead.

但是，由于您的网站可能是一个公共网站，因此对所有人来说，它的风格应该是一般的。

However, since your site could be a public site, style it like genericly for everyone. It's not only you that's viewing the site.

不是开发人员：

可以想到（并且之前已经执行此操作* ）是从页面中删除外部样式表，并将其替换为您自己喜欢的 modded 版本。这是一个原始CSS文件的副本，更改需要更改的内容，然后通过JS创建< link> 加载到该外部文件，通过AJAX加载内容并将它们放在< style> 中。然而，这种方法充满了障碍。 < link> 没有 onload 事件，因此您不会知道外部CSS已加载crafty解决方法）和AJAXing CSS内容暗示您的CSS是在同一个域或浏览器和服务器支持CORS。

The best way I can think of (and already did this before*) is to remove external stylesheets from the page and replace them with modded versions of your own liking. That is taking a copy of the original CSS file, change what needs to be changed, and then load it via JS by creating a <link> to that external file, or load the contents via AJAX and put them in a <style>. However, this approach is riddled with obstacles. <link> does not have an onload event so you won't know the external CSS was loaded (there are crafty workarounds though) and AJAXing CSS contents imply that your CSS is in the same domain or the browser and server supports CORS.

另一种方法，你可以做的是有JS窥视加载的样式表并修改其内容。这是一个更加JS密集的工作，因为JS寻找你的定义改变一堆CSS声明。这是一个更安全的赌注，但是，我相信不是所有的浏览器都可以遍历CSS样式，或至少做不同的浏览器。

Another way you can do it is to have JS peek into loaded stylesheets and modify their contents. This is a more JS intensive work since JS looks for your definition to change in a pile of CSS declarations. This is a safer bet, however, I believe not all browsers can traverse CSS styles or at least do it differently across browsers. Also, if you got a large stylesheet, you'd be parsing it every time.

如你所说， .css（）将是递归的。 True，因为它将内联样式应用于每个受影响的元素。这是 good ，在某种意义上，内联样式在优先级更高，所以使用 .css（）放置，你几乎肯定它们将生效。

As you said, .css() would be recursive. True, because it applies inline styles to each affected element. This is good in a sense that inline styles are higher up in the priority so whatever is placed using .css(), you are almost sure that they will take effect. However, it's more work intensive since it involves the DOM now.

_{*图书馆我created不会删除现有样式，它只会加载和卸载使用其API声明的预定义样式}

这篇关于使用JavaScript或jQuery更改CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！