使用javascript(或jQuery)选择和操作CSS伪元素，如::before和::after

下面的解决方案告诉你如何用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);
}

你完蛋了!!

2021-03-20 10:10:25

下面是访问:after和:before样式属性的方法，在css中定义:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

2014-07-15 21:55:01

你可以使用我的插件来实现这个目的。

JQuery:

应该指定值，就像在jQuery.css的普通函数中一样

此外，你还可以获得pseudo-element参数的值，就像在jQuery.css的普通函数中一样:

console.log( $(element).cssBefore(parameter) );

JS:

GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/

2017-07-31 18:19:08

我有一些不同的东西给你，既简单又有效。

    <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');
    });

2019-11-12 09:32:18

我已经创建了一个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!"'
  });

2019-02-03 06:55:17

这里有很多答案，但没有一个答案有助于操作:before或:after的css，甚至不是公认的答案。

以下是我的建议。让我们假设你的HTML是这样的:

<div id="something">Test</div>

然后你在CSS中设置它的:before并像这样设计它:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

请注意，我还在元素本身设置了内容属性，以便稍后可以轻松取出。现在有一个按钮点击，你想改变的颜色:before绿色和它的字体大小为30px。您可以通过以下方法实现:

在一些类.active上定义一个样式符合你要求的css:

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

现在你可以通过添加类到你的:before元素来改变:before样式，如下所示:

<button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

如果你只是想获取:之前的内容，可以这样做:

<button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

最终如果你想通过jQuery动态改变:before内容，你可以实现如下:

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

点击上面的“changeBefore”按钮将更改:在#something的内容之前变为“22”，这是一个动态值。

我希望这对你们有帮助

2016-11-14 13:25:10

使用javascript(或jQuery)选择和操作CSS伪元素，如::before和::after

推荐文章

最新文章

标签