使用 JQuery 更改 :before css 选择器的宽度属性 [重复]

Posted

技术标签:

【中文标题】使用 JQuery 更改 :before css 选择器的宽度属性 [重复]【英文标题】:Changing width property of a :before css selector using JQuery [duplicate] 【发布时间】:2012-04-21 03:06:59 【问题描述】:

我有一个包含图像的页面,我使用 :before CSS 选择器对其进行了样式设置。 图像是动态的,因此它没有固定的宽度;所以我需要动态设置 :before 规则的宽度。 我想在客户端使用 JQuery。 假设:

.column:before
    width: 300px;
    float: left;
    content: "";
    height: 430px;


.column
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;

我如何才能使用 JQuery 仅更改带有 :before 选择器(而不是没有它的选择器)的类的宽度属性?

【问题讨论】:

***.com/questions/5041494/… 你能告诉我们你想要达到的效果吗?可能有更好的方法来做你正在做的事情。 不是重复的@temani-afif @phpWorm... 它怎么不是重复的? @TemaniAfif 在重复的问题中,它显示了如何更改内容,而不是 ::after 或 ::before 的宽度,并且除了这个之后和之前的宽度不能被答案改变在那个问题中给出 【参考方案1】:

我认为没有直接访问伪类规则的 jQuery 方式,但您始终可以将新的 style 元素附加到文档的头部,例如:

$('head').append('<style>.column:beforewidth:800px !important;</style>');

查看live demo here

我还记得曾经看过一个解决这个问题的插件,但不幸的是我在第一次谷歌搜索时找不到它。

【讨论】:

值得注意的一点是,尽管您的示例使用“one”,因此不会出现多个 &lt;style&gt; 标签,但如果您这样做,您需要自己清理每页多次或需要切换状态。 jsfiddle.net/xK6k4/2 是如何“清理”的示例实现。 这是一种为每个迭代赋予其自己的类的方法:jsfiddle.net/TB824 这是我根据这个答案所做的:jsfiddle.net/p1yc5bsw 通过使用 text() 方法,您可以重复使用相同的元素,而不会每次都破坏它。 这部分谢谢你(因为这个解决方案很聪明),但我也想明确地向任何希望&lt;style&gt; 标签可以有类的人说清楚。我从来没有想到过。 只想备注。也使用了append,但没有使用!important。在 FF 中工作,但在 Chrome、Edge 中没有工作。所以千万不要忘记使用!important【参考方案2】:

伪元素是shadow DOM的一部分,不能修改(但可以查询它们的值)。

但是,有时您可以通过使用类来解决这个问题。

jQuery

$('#element').addClass('some-class');

CSS

.some-class:before 
    /* change your properties here */

这可能不适合您的查询,但它确实表明您有时可以实现这种模式。

要获取伪元素的值,请尝试以下代码...

var pseudoElementContent = window.getComputedStyle($('#element')[0], ':before')
  .getPropertyValue('content')

【讨论】:

【参考方案3】:

伪元素不是 DOM 的一部分,因此无法使用 jQuery 或 javascript 进行操作。

但是正如在接受的答案中指出的那样,您可以使用 JS 附加一个样式块,该样式块结束了对伪元素的样式设置。

【讨论】:

我没有投票,但是可以从 JS 中对元素进行样式设置,以创建更适用的样式规则(根据公认的答案),并且样式肯定是一种操作形式... @nnnnnn 好的,但它不是自己进行操作,而是通过添加浏览器读取的样式规则来进行操作,从而进行操作。不过奇怪的漏洞。但我同意造型是一种操纵形式。【参考方案4】:

答案应该是耆那教。您不能通过伪选择器选择元素,但您可以使用 insertRule 在样式表中添加新规则。

我做了一些适合你的东西:

var addRule = function(sheet, selector, styles) 
    if (sheet.insertRule) return sheet.insertRule(selector + " " + styles + "", sheet.cssRules.length);
    if (sheet.addRule) return sheet.addRule(selector, styles);
;

addRule(document.styleSheets[0], "body:before", "content: 'foo'");

http://fiddle.jshell.net/MDyxg/1/

为了超级酷(并回答这个问题真的),我再次推出它并将其包装在一个 jQuery 插件中(但是,仍然不需要 jquery!):

/*!
 * jquery.addrule.js 0.0.1 - https://gist.github.com/yckart/5563717/
 * Add css-rules to an existing stylesheet.
 *
 * @see http://***.com/a/16507264/1250044
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/05/12
 **/

(function ($) 

    window.addRule = function (selector, styles, sheet) 

        styles = (function (styles) 
            if (typeof styles === "string") return styles;
            var clone = "";
            for (var p in styles) 
                if (styles.hasOwnProperty(p)) 
                    var val = styles[p];
                    p = p.replace(/([A-Z])/g, "-$1").toLowerCase(); // convert to dash-case
                    clone += p + ":" + (p === "content" ? '"' + val + '"' : val) + "; ";
                
            
            return clone;
        (styles));
        sheet = sheet || document.styleSheets[document.styleSheets.length - 1];

        if (sheet.insertRule) sheet.insertRule(selector + " " + styles + "", sheet.cssRules.length);
        else if (sheet.addRule) sheet.addRule(selector, styles);

        return this;

    ;

    if ($) $.fn.addRule = function (styles, sheet) 
        addRule(this.selector, styles, sheet);
        return this;
    ;

(window.jQuery));

用法很简单:

$("body:after").addRule(
    content: "foo",
    color: "red",
    fontSize: "32px"
);

// or without jquery
addRule("body:after", 
    content: "foo",
    color: "red",
    fontSize: "32px"
);

https://gist.github.com/yckart/5563717

【讨论】:

非常酷。我 tweaked it 有点让它为我工作,但它似乎在 Firefox 中不起作用。 @CorySimmons 看起来很棒,我已经在我的要点中添加了评论:) 把它变成一个回购,我会和你一起工作。现在它在 FF 或旧 IE 中不起作用,但可以修复。 这可能会在某些浏览器中引发跨域安全问题。 sheet.cssRules例如在 Chrome 中将是 null 它有效。但是选择正确的样式表索引很重要。我用console.log(document.styleSheets); 找到了 nedded【参考方案5】:

您可以尝试从基类继承属性:

var width = 2;
var interval = setInterval(function () 
    var element = document.getElementById('box');
    width += 0.0625;
    element.style.width = width + 'em';
    if (width >= 7) clearInterval(interval);
, 50);
.box 
    /* Set property */
    width:4em;
    height:2em;
    background-color:#d42;
    position:relative;

.box:after 
    /* Inherit property */
    width:inherit;
    content:"";
    height:1em;
    background-color:#2b4;
    position:absolute;
    top:100%;
&lt;div id="box" class="box"&gt;&lt;/div&gt;

【讨论】:

【参考方案6】:

一种选择是在图像上使用属性,并使用 jQuery 修改它。然后在 CSS 中取该值:

html(注意我假设 .cloumndiv 但它可以是任何东西):

<div class="column" bf-width=100 >
    <img src="..." />
</div>

jQuery:

// General use:
$('.column').attr('bf-width', 100);
// With your image, along the lines of:
$('.column').attr('bf-width', $('img').width());

然后为了在 CSS 中使用该值:

.column:before 
    content: attr(data-content) 'px';
    /* ... */

这将从.column 中获取属性值,并将其应用到前面。

来源:CSS attr(注意前面的examples),jQuery attr

【讨论】:

这听起来很不错,但对我不起作用。您提到的 MDN 参考 sais “attr() 函数可以与任何 CSS 属性一起使用,但对内容以外的属性的支持是实验性的。”【参考方案7】:

正如 Boltclock 在 his answer to Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery 中所说的

虽然它们是由浏览器通过 CSS 呈现的,就好像它们就像其他真实的 DOM 元素一样,但伪元素本身并不是 DOM 的一部分,因此您无法使用 jQuery 选择和操作它们。

最好用 jQuery 设置样式,而不是使用伪 CSS 选择器。

【讨论】:

以上是关于使用 JQuery 更改 :before css 选择器的宽度属性 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

更改 :before 和 :after 伪元素的样式? [复制]

在 CSS 中更改使用 ::before 和 ::after 创建的元素的顺序

如何用JQuery操作CSS伪文档元素before或after中的content

在 :before 或 :after CSS 中更改 SVG 填充颜色

CSS伪元素(:之前/:之后)的jQuery .click()事件?

使用javascript,jQuery实现修改before,after伪类的样式(转)