有什么方法来选择/操作CSS伪元素,如::before和::after(和旧版本的一个分号)使用jQuery?
例如,我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
有什么方法来选择/操作CSS伪元素,如::before和::after(和旧版本的一个分号)使用jQuery?
例如,我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
当前回答
下面的解决方案告诉你如何用javascript的attr属性更新伪元素。
在HTML中添加一个属性,你可以用javascript setAttribute操作它。
<div
id="inputBoxParent"
count="0">
...
</div>
用js更新
inputBoxParent.setAttribute('count', value.length)
CSS -在伪元素中添加内容为attr(attributeName)
.input-box-container::after{
content: attr(count);
}
你完蛋了!!
const inputBoxParent = document.getElementById("inputBoxParent"); const handleOnChange = (value) => { inputBoxParent.setAttribute('count', value.length) } .input-box-container { position: relative; width: 200px; } .input-box-container::after{ position: absolute; bottom: 8px; right: 10px; height: 10px; width: 20px; content: attr(count); } <h4> Type some text inside the box and click outside to see resule i.e. pseudo element content change</h4> <div id="inputBoxParent" class="input-box-container" count="0"> <input type="text" id="inputBox" placeholder="type some thing" onchange="handleOnChange(this.value)" onkeyup="handleOnChange(this.value)" /> </div>
其他回答
在jQuery中不能选择伪元素,因为它们不是DOM的一部分。 但是你可以在父元素中添加一个特定的类,并在CSS中控制它的伪元素。
例子
jQuery:
<script type="text/javascript">
$('span').addClass('change');
</script>
在CSS中:
span.change:after { content: 'bar' }
谢谢大家! 我设法做了我想做的事:D http://jsfiddle.net/Tfc9j/42/ 让我们来看看
我想有一个外部div的不透明度是不同于内部div的不透明度和改变点击somwewhere;) 谢谢!
$('#ena').on('click', function () {
$('head').append("<style>#ena:before { opacity:0.3; }</style>");
});
$('#duop').on('click', function (e) {
$('head').append("<style>#ena:before { opacity:0.8; }</style>");
e.stopPropagation();
});
#ena{
width:300px;
height:300px;
border:1px black solid;
position:relative;
}
#duo{
opacity:1;
position:absolute;
top:50px;
width:300px;
height:100px;
background-color:white;
}
#ena:before {
content: attr(data-before);
color: white;
cursor: pointer;
position: absolute;
background-color:red;
opacity:0.9;
width:100%;
height:100%;
}
<div id="ena">
<div id="duo">
<p>ena p</p>
<p id="duop">duoyyyyyyyyyyyyyy p</p>
</div>
</div>
我已经创建了一个jQuery插件来添加css伪规则,如使用.css()为特定的元素。
插件代码和测试用例在这里(更新的Fiddle) 用例作为简单的CSS图像弹出这里
用法:
$('body')
.css({
backgroundColor: 'white'
})
.cssPseudo('after', {
content: 'attr(title) ", you should try to hover the picture, then click it."',
position: 'absolute',
top: 20, left: 20
})
.cssPseudo('hover:after', {
content: '"Now hover the picture, then click it!"'
});
您可以创建一个伪属性,也可以使用一个现有的属性,并在伪元素的样式表中继承它。
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或::after sudo元素,你可以用JS来做。见下文;
jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');
注意<style>元素是如何具有一个ID的,如果样式动态变化,可以使用该ID删除它并再次添加到它。
这样,在JS的帮助下,你的元素就可以完全按照你想要的样式通过CSS进行样式化。