我无法注入带有“!重要”的样式规则

发布于 2024-12-12 03:31:44 字数 333 浏览 1 评论 0原文

我尝试使用以下代码注入样式:

document.body.style.color='green!important';

Per CSS 级联引用,通过应用 !important 规则我可以​​超越起源和特殊性。

我尝试使用 Firefox Firebug 将其注入 www.google.com 但没有成功。

如何使用 !important 规则注入前景色?

I tried to inject a style using this code:

document.body.style.color='green!important';

Per the CSS cascade ref, by applying the !important rule I can trump origin and specificity.

I tried to inject this using Firefox Firebug into www.google.com however no luck.

How do I inject a foreground color with an !important rule?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

孤独患者 2024-12-19 03:31:44

根据规范,如果您想设置优先级,而不仅仅是值,则必须使用 setProperty,如下所示:

document.body.style.setProperty ("color", "green", "important");

Per the spec, if you want to set the priority, not just the value, you have to use setProperty, like so:

document.body.style.setProperty ("color", "green", "important");
枉心 2024-12-19 03:31:44
element.style.cssText = 'color:green !important';

应该为你工作。

element.style.cssText = 'color:green !important';

should work for you.

小镇女孩 2024-12-19 03:31:44

style.cssText 是添加 !important 的唯一方法。

<script>
   document.body.style.cssText='color: red !important;'
</script>

style.cssText is the only way to add !important.

<script>
   document.body.style.cssText='color: red !important;'
</script>
○闲身 2024-12-19 03:31:44

所有答案都很好,但他们都假设属性的固定,如果不

看看我的解决方案

this.style.setProperty("color", $(this).css('color'), "important");

而不是手写 怎么办?值,我使用 jquery $(this).css('attr') 获取它

all answers are great but they all assumed the value of the attribute is fixed,, what if not

take look at my solution

this.style.setProperty("color", $(this).css('color'), "important");

instead of hand writing the value, I got it using jquery $(this).css('attr')

赴月观长安 2024-12-19 03:31:44

我想说的是,它可能无法正常工作,不是因为代码中的任何错误(空格除外),而是因为修改 body 标记不是一个足够具体的元素、类或您需要创建所需的内容影响。

例如,搜索结果的页面文本具有“st”类别。
所有搜索结果都封装在一个


  • 标签。
  • 因此,达到这种效果的一些代码可能如下所示:

    var arr = document.getElementsByClassName('st');
    for(i=0; i<arr.length; i++){
        arr[i].style.color="green";
    }
    

    I would like to pose that it may not be working not so much due to any error in code (excepting the space) but more because modifying the body tag isn't a specific enough element, class, or what have you to create the desired effect.

    Like for instance the page text of a search result has a class of "st".
    all search results are each encapsulated in an
    <li>
    tag.

    So some code to such effect might look like this:

    var arr = document.getElementsByClassName('st');
    for(i=0; i<arr.length; i++){
        arr[i].style.color="green";
    }
    
    左秋 2024-12-19 03:31:44

    仅使用此:

    document.body.style.color="green";
    

    您不必以这种方式使用 important。无论如何,正如 Fatal 指出的那样,当 css 样式表中有直接重要的规则时,您需要覆盖它,这是行不通的。

    这样,您必须动态创建样式表并将其添加到 head 中:

    function addNewStyle(newStyle) {
       var styleElement = document.getElementById('styles_js');
       if (!styleElement) {
           styleElement = document.createElement('style');
           styleElement.type = 'text/css';
           styleElement.id = 'styles_js';
           document.getElementsByTagName('head')[0].appendChild(styleElement);
       }
       styleElement.appendChild(document.createTextNode(newStyle));
    }
    

    然后您可以像这样更新样式

    addNewStyle('body {color:green !important;}')
    

    Use only this:

    document.body.style.color="green";
    

    you can not have to use important in this way. Anyway as Fatal pointed out, this will not work, when there is directly important rule in css stylesheet, that you need to override.

    In that way, you have to dynamicaly create stylesheet and ad it inside head:

    function addNewStyle(newStyle) {
       var styleElement = document.getElementById('styles_js');
       if (!styleElement) {
           styleElement = document.createElement('style');
           styleElement.type = 'text/css';
           styleElement.id = 'styles_js';
           document.getElementsByTagName('head')[0].appendChild(styleElement);
       }
       styleElement.appendChild(document.createTextNode(newStyle));
    }
    

    Then you can update style just like that

    addNewStyle('body {color:green !important;}')
    
    源来凯始玺欢你 2024-12-19 03:31:44

    我需要保持 !important 对于以下代码如何做

    <script> var size = $(window).width(); 
    if(size >="1900" && size <="2890"){
     $(document).ready(function(){ $(".myMove").click(function(){ $(".hqnblogo").animate({ left:'-22% ', top: '67%', height:'7%', }); $(".hqnbnaturalslogo").animate({ left: '86%', top: '20px', height:'7%', }); }); }); } </script>?
    

    i need to keep !important for the following code how to do

    <script> var size = $(window).width(); 
    if(size >="1900" && size <="2890"){
     $(document).ready(function(){ $(".myMove").click(function(){ $(".hqnblogo").animate({ left:'-22% ', top: '67%', height:'7%', }); $(".hqnbnaturalslogo").animate({ left: '86%', top: '20px', height:'7%', }); }); }); } </script>?
    
    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文