在 jQuery 中删除或更改 CSS 伪类答案

【问题标题】：Removing or altering CSS pseudo class in jQuery在 jQuery 中删除或更改 CSS 伪类
【发布时间】：2011-06-24 18:53:50
【问题描述】：

一个足够简单的问题，这么简单 - 是否可以使用 jQuery 删除或更改 CSS 伪类？或任何其他 Javascript 方法

具体来说，我想摆脱 :focus on input。我无法以任何方式直接更改 CSS 文件。

感谢您的帮助

克星

【问题讨论】：

你想去掉焦点事件还是类名？
您的意思是要覆盖使用伪类的现有样式？
我需要完全摆脱这个事件。不幸的是，没有涉及到类名，只是一个简单的输入：CSS 中的焦点
@Matt - 是的，覆盖或完全为空样式。真的任何路线！
在这种情况下，我会使用@Town 的解决方案，并在纯 CSS 中完成，包括您自己的样式表或内联样式在您无法更改的样式表之后。（以后的样式表规则会覆盖相同选择器的先前样式表规则。或者，您可以使用更具体的选择器或!important 选项来覆盖。）您也可以直接在 Javascript 中更改样式表；请参阅 David 对 this question 的回答，这与您的类似。

标签： javascript jquery css

【解决方案1】：

我无法直接更改 CSS 文件任何方式。

假设你只能使用 JavaScript 来做到这一点，我想不出比这更好的了：

$('head').append('<style>input:focus{background:#fff}</style>');

您必须单独重置每个属性。 font-weight:normal, color:#000 - 随便你。

见：http://jsfiddle.net/jqpAu/

【讨论】：

【解决方案2】：

没有更具体的细节很难准确回答，但如果你愿意，你可以覆盖:focus 样式：

// in the CSS file
input:focus {background-color: red;} 

// in your page
input:focus {background-color: inherit;} // overrides with the parent background

Demo

【讨论】：

@fearofawhackplanet 是的；即使他不能编辑提供的 CSS 文件，他当然可以用他自己的样式覆盖它，无论是内联的还是在他自己的文件中。实际上，这就是任何 Javascript 解决方案都会做的事情——注入一种样式来覆盖原来的样式，所以如果你可以使用纯 CSS 来做到这一点，那么这就是最干净的解决方案。

【解决方案3】：

看到这个答案：Setting CSS pseudo-class rules from JavaScript

我认为您正在寻找一种动态添加 CSS 的方法。示例：http://jsfiddle.net/zkMCY/

代码：

var style = '\
    <style type="text/css">\
        a:hover{ color: #a55; }\
    </style>';
$('body').append(style);

【讨论】：

【解决方案4】：

如果您想真正阻止用户使用您的输入，请通过您的 html 执行此操作：

<input disabled="disabled">

【讨论】：

【解决方案5】：

你可以使用$(selector).removeClass(className)

【讨论】：