有什么方法来选择/操作CSS伪元素，如::before和::after(和旧版本的一个分号)使用jQuery?
例如，我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
当前回答
我有一些不同的东西给你，既简单又有效。
<style>
.case-after:after { // set your properties here like eg:
color:#3fd309 !important;
}
.case-before:before { // set your properties here like eg:
color:#151715 !important;
}
</style>
// case for after
$('#button-id').on('click', function() {
$(".target-div").toggleClass('case-after');
});
// case for before
$('#button-id').on('click', function() {
$(".target-div").toggleClass('case-before');
});
其他回答
您可以创建一个伪属性，也可以使用一个现有的属性，并在伪元素的样式表中继承它。
var switched = false; // Enable color switching setInterval(function () { var color = switched ? 'red' : 'darkred'; var element = document.getElementById('arrow'); element.style.backgroundColor = color; // Managing pseudo-element's css // using inheritance. element.style.borderLeftColor = color; switched = !switched; }, 1000); .arrow { /* SET FICTIONAL PROPERTY */ border-left-color:red; background-color:red; width:1em; height:1em; display:inline-block; position:relative; } .arrow:after { border-top:1em solid transparent; border-right:1em solid transparent; border-bottom:1em solid transparent; border-left:1em solid transparent; /* INHERIT PROPERTY */ border-left-color:inherit; content:""; width:0; height:0; position:absolute; left:100%; top:-50%; } <span id="arrow" class="arrow"></span>
似乎它对“content”属性不起作用:(
这是不实际的，因为我没有为现实世界的使用写这篇文章，只是给你一个可以实现的例子。
css = {
before: function(elem,attr){
if($("#cust_style") !== undefined){
$("body").append("<style> " + elem + ":before {" + attr + "} </style>");
} else {
$("#cust_style").remove();
$("body").append("<style> " + elem + ":before {" + attr + "} </style>");
}
}, after: function(elem,attr){
if($("#cust_style") !== undefined){
$("body").append("<style> " + elem + ":after {" + attr + "} </style>");
} else { $("#cust_style").remove();
$("body").append("<style> " + elem + ":after {" + attr + "} </style>");
}
}
}
这个当前add's a /或追加一个Style元素，其中包含你的必要属性，这将影响目标元素的伪元素之后。
这可以用作
css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after
and
css.before( ... ); // to affect the before pseudo element.
伪元素不能直接通过DOM访问，目前不可能自由编辑css的具体值。
我的方法只是一个例子，它不适合练习，你可以修改它，尝试一些你自己的技巧，使它适合真实世界的使用。
所以用这个和其他东西做你自己的实验吧!
阿达什·赫格德。
这是我第一次在给出我自己的答案之前没有阅读所有给出的答案，所以我希望这不会让我…
在我的情况下，这是需要的图标附加到一个，div和按钮元素，这与<i class="icon-class"></i>的工作有点不同，因为他们没有icon-class类。添加class="icon-class"会破坏样式。
相反，我为它们添加了一个数据图标属性，其中的值应该在element:: {content: "HERE"}之前，然后这个相当简单的JavaScript就会处理剩下的事情。
{
const fakeIcons = document.querySelectorAll('[data-icon]')
for (const iconElement of fakeIcons) {
const fakeClass = 'fake-' + Array.from(Array(20), () => Math.floor(Math.random() * 36).toString(36)).join('')
const beforeContent = iconElement.getAttribute('data-icon')
iconElement.classList.add(fakeClass)
const style = document.createElement('style')
style.type = 'text/css'
style.innerHTML = `
.${fakeClass}::before {
content: "${beforeContent}" !important;
}
`
document.getElementsByTagName('head')[0].appendChild(style)
}
}
代码解释道:
选择具有指定属性(data-icon)的所有元素 循环遍历它们 随机生成一个以fake-开头的类名，后面跟着一个随机的字母数字字符串 获取data-icon属性的值 向元素中添加随机生成的类 在伪元素设置内容之前为::创建样式 在<head> HTML元素的末尾添加样式
您可能认为这是一个很简单的问题，使用jQuery可以做的所有其他事情。不幸的是，这个问题归结为一个技术问题:css:after和:before规则不是DOM的一部分，因此不能使用jQuery的DOM方法进行修改。
有一些方法可以使用JavaScript和/或CSS工作区来操作这些元素;您使用哪一种取决于您的确切需求。
我将从被广泛认为是“最佳”的方法开始:
1)添加/删除一个预定的类
在这种方法中，您已经在CSS中创建了一个具有不同的:after或:before样式的类。将这个“new”类放在样式表的后面，以确保它被覆盖:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
然后你可以很容易地添加或删除这个类使用jQuery(或香草JavaScript):
$('p').on('click', function() {
$(this).toggleClass('special');
});
美元(“p”)。On('点击'，函数(){ (美元).toggleClass(特殊的); })； p:{之前 内容:“foo”; 颜色:红色; 光标:指针; ｝ p.special:{之前 内容:“酒吧”; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p>这是一个段落 <p>这是另一段
优点:易于实现与jQuery;快速改变多个风格在一次;强制分离关注点(从HTML中隔离CSS和JS) 缺点:CSS必须预先编写，因此:before或:after的内容不是完全动态的
2)直接在文档的样式表中添加新样式
可以使用JavaScript直接向文档样式表添加样式，包括:after和:before样式。jQuery并没有提供方便的快捷方式，但幸运的是JS并没有那么复杂:
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
Var STR = "bar"; document.styleSheets [0] .addRule(“p。特殊:在` `之前，` `内容:` ` + STR + ` ` ` ` ` `); p:{之前 内容:“foo”; 颜色:红色; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p class="special">这是一个段落</p> 这是另一段</p>
. addrule()和相关的. insertrule()方法目前得到了很好的支持。
作为一种变体，你也可以使用jQuery来添加一个全新的样式表到文档中，但必要的代码并不干净:
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
Var STR = "bar"; $(' <时尚> p。特殊:{之前内容:“+ str +”}> < /风格”).appendTo(头); p:{之前 内容:“foo”; 颜色:红色; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p class="special">这是一个段落</p> 这是另一段</p>
如果我们谈论的是“操纵”值，而不仅仅是添加值，我们还可以使用不同的方法读取现有的:after或:before样式:
var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');
var str = window.getComputedStyle($('p')[0]， ':before').getPropertyValue('content'); console.log (str); document.styleSheets [0] .addRule(“p。特殊:before'， 'content: "' +str +str + '";'); p:{之前 内容:“foo”; 颜色:红色; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p class="special">这是一个段落</p> 这是另一段</p>
在使用jQuery时，我们可以将document.querySelector('p')替换为$('p')[0]，以获得稍短的代码。
优点:任何字符串都可以动态插入到样式中 缺点:原始样式不会被改变，只是被覆盖;重复使用(ab)可以使DOM变得任意大
3)改变一个不同的DOM属性
您还可以在CSS中使用attr()来读取特定的DOM属性。(如果浏览器支持:before，它也支持attr())在一些精心准备的CSS中，通过将此与content:结合起来，我们可以动态地更改:before和:after的内容(但不能更改其他属性，如边距或颜色):
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
JS:
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
美元(“p”)。On('点击'，函数(){ (美元).attr(“数据”、“酒吧”); })； p:{之前 内容:attr(数据); 颜色:红色; 光标:指针; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p>这是一个段落 <p>这是另一段
如果CSS不能提前准备，这可以与第二种技术结合使用:
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str);
});
Var STR = "bar"; document.styleSheets[0]。addRule('p:before'， 'content: attr(data-before) !important;'); 美元(“p”)。On('点击'，函数(){ (美元)。attr(“数据”,str); })； p:{之前 内容:“foo”; 颜色:红色; 光标:指针; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p>这是一个段落 <p>这是另一段
优点:不会创造出无尽的额外风格 缺点:CSS中的attr只能应用于内容字符串，而不是url或RGB颜色
有人评论说附加一个完整的样式元素到头部元素，如果你只做一次，这还不错，但如果你需要重置它不止一次，你最终会有大量的样式元素。所以为了防止这种情况，我在头部创建了一个带有id的空白样式元素，并像这样替换它的innerHTML:
<style id="pseudo"></style>
然后JavaScript看起来是这样的:
var pseudo = document.getElementById("pseudo");
function setHeight() {
let height = document.getElementById("container").clientHeight;
pseudo.innerHTML = `.class:before { height: ${height}px; }`
}
setHeight()
现在，在我的情况下，我需要这个来根据另一个元素的高度设置一个before元素的高度，它会在调整大小时发生变化，所以使用这个，我可以在每次窗口调整大小时运行setHeight()，它将正确地替换<style>。
希望这能帮助那些被困在做同样事情的人。
推荐文章
- 在JavaScript中将JSON字符串解析为特定对象原型
- 将字符串“true”/“false”转换为布尔值
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 如何使用JavaScript代码获得浏览器宽度?
- event.preventDefault()函数在IE中无法工作
- indexOf()和search()的区别是什么?
- 错误:'types'只能在.ts文件中使用- Visual Studio Code使用@ts-check
- React-Native:应用程序未注册错误
- LoDash:从对象属性数组中获取值数组
- src和dist文件夹的作用是什么?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- jQuery UI对话框-缺少关闭图标
- 如何使用AngularJS获取url参数
