使用 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”,因此不会出现多个<style>
标签,但如果您这样做,您需要自己清理每页多次或需要切换状态。 jsfiddle.net/xK6k4/2 是如何“清理”的示例实现。
这是一种为每个迭代赋予其自己的类的方法:jsfiddle.net/TB824
这是我根据这个答案所做的:jsfiddle.net/p1yc5bsw 通过使用 text() 方法,您可以重复使用相同的元素,而不会每次都破坏它。
这部分谢谢你(因为这个解决方案很聪明),但我也想明确地向任何希望<style>
标签可以有类的人说清楚。我从来没有想到过。
只想备注。也使用了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%;
<div id="box" class="box"></div>
【讨论】:
【参考方案6】:一种选择是在图像上使用属性,并使用 jQuery 修改它。然后在 CSS 中取该值:
html(注意我假设 .cloumn
是 div
但它可以是任何东西):
<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 填充颜色