相关疑难解决方法(0)

我正在寻找一种方法来改变JavaScript类的伪类选择器(例如:link,:hover等)的CSS规则.

所以CSS代码的类比:a:hover { color: red }在JS中.

我无法在其他任何地方找到答案; 如果有人知道这是浏览器不支持的东西,那么这也是一个有用的结果.

是否可以使用JavaScript更改CSS样式表？

我不是在谈论:

document.getElementById('id').style._____='.....';

我AM谈论改变:

#id {
    param: value;
}

除了做一些脏东西(我们还没有尝试过btw),比如在头部创建一个新对象,innerHTML那里有一个样式标签,等等.尽管这样,即使它确实起作用,也会带来一些问题作为样式block已在别处定义,我不确定浏览器何时/是否会解析动态创建的样式块？

可能重复:
从Javascript更改CSS规则集

我想知道是否有可能修改Css样式表声明而不进行内联样式.

这是一个简单的例子:

<style>
    .box {color:green;}
    .box:hover {color:blue;}
</style>

<div class="box">TEXT</div>

这会给出一个蓝色的书写框,在悬停时变成绿色.

如果我为颜色提供内联样式,则悬停行为将丢失:

<div class="box" style="color:red;">TEXT</box>

无论如何,这会给出一个红色的书写框.

所以我的问题是,如何访问和修改css声明对象而不是用内联方法覆盖样式.

谢谢,

有人可以告诉我如何通过 javascript 更改 css 类属性吗？例子：

.winner
{
    background-color: white;
}

如何更改类优胜者背景颜色的值。当我写： var some = document.querySelector("winner"); 我得到与班级优胜者的按钮。我想要这个类不是 html 的元素。我怎么才能得到它？

如何使用 XUL、SDK 或 WebExtensions 技术从 Firefox 附加组件中的 JavaScript 动态修改 CSS 规则集（例如使用类选择器）？尝试支持 Firefox 29.0b1 到 49.0a1。

我想解决的问题（来自 Firefox 插件内的 XUL 文档，有时与网页不同）：

file.xul:（这条线在顶部）

<?xml-stylesheet href="chrome://{GUID}/skin/text.css" type="text/css"?>

text.css:（文件中的相关类）

.myTextClass {
    max-width: 800px;
}

code:

// Modify the class selector rule set to add another rule,
// i.e. font-family: DejaVu Sans Mono

// Later on, after user input, change or remove this font in this one class

这可能部分重复#20927075，它没有令人满意的答案，但我也对 SDK 或 WebExtensions 技术感兴趣，以确保我想要添加到现有基于 XUL 的附加组件的功能可以使用较新的 API 来实现。

我想实现一个基本的“字体选择器”UI 功能，并将其应用到类中的新字体。我有一个简单的 CSS 规则集，其中包含一个类选择器，它用一个规则定义一个类（目前，但可能手动/静态添加其他规则集），我想向其中添加另一条规则，并让附加组件界面已更新。 …

这是我的css课程:

.my-css-class-name
{
    display: block;
}

我的网页上有一个使用此类的元素.我想修改这个元素的"display"属性.
我很乐意通过获取该元素的句柄然后修改我需要的内容来做到这一点,但是,我不知道元素的名称 - 它是随机生成的(它是第三方扩展).

所以我想我必须得到".my-css-class-name"的句柄并直接修改该属性.
我如何到达那里,跨浏览器(主要的)解决方案？

编辑#1:
我正在寻找与新浏览器的兼容性.

当用户单击某个按钮时，我试图为我的背景获得模糊效果。当用户单击按钮时，如何更新我的 css 类。

这是我当前的 css 类

.post_options {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #eceff1;
    position: fixed;
}

我想让它像这样让用户点击按钮

.post_options {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #eceff1;
    position: fixed;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

这是应该使我的背景模糊的按钮

 <button className="preview_btn" href="#postpreview" onClick={this.preview}>Preview</button>

注意：我这样做是为了反应。

我尝试给一个单独的 div 和背景效果，但它所做的也是模糊了里面的内容。

我正在使用 Angular 12，并且正在创建动态主题更改。

当我的应用程序根据所选主题加载时，我设置所有颜色变量，如下所示：

document.documentElement.style.setProperty(colorKey, colorValue);

之后，所有颜色都设置为文档元素而不是根元素。

正如您所看到的，我还有一些根元素的变量。但这些变量在 css 文件中定义为：

:root {
    --primary: #005d7a;
    --primary-50: #edf1f2;
    --primary-400: #0094bd;
    --primary-700: #027498;
    --secondary-50: #ffebb7;
    --silver: #3a3a3a;
    --silver-light: #e4e7ea;
    --silver-light-border: #dad7d6;
    --main-background: white;
    --main-page-background: #e4e7ea;
    --main-text-color: #3a3a3a;
    --disabled-color: #ccc;
}

效果很好。

我的问题是：

1. 如何将从 ts 文件定义的其他变量设置到根目录而不是文档元素？
2. 根据帖子根选择器比文档强。那么（如上图所示）我的根primary-50颜色如何被文档primary-50覆盖？