Question

我正在尝试使用jQuery访问CSS :before和:after选择器。我尝试了一些方法，但似乎DOM无法看到CSS选择器。我想要操纵的是给元素一个动态的background-color。

例如：

.className:before {background: red;}

在某些时候，我想将此颜色更改为动态：

$('.clasName:before').css('background-color', bgColor);   //this method doesn't work

还试过这个：

$('.clasName').addClass('change').attr('data-background', bgColor); 
//this method works only for content property

CSS

.className.change:before {
 background: attr(data-background);
}

它不能正常工作。有没有解决这个问题的工作？

Answer 1

(function($) {
  jQuery.fn.extend({
    getPseudo: function(pseudo, prop) {
      var props = window.getComputedStyle(
        $(this.selector).get(0), pseudo
      ).getPropertyValue(prop);
      return String(props);
    },
    setPseudo: function(_pseudo, _prop, newprop) {
      var elem = $(this);
      var s = $("style");
      var p = elem.getPseudo(_pseudo, _prop);
      console.log(p)
      var r = p !== "" ? new RegExp(p) : false;
      var selector = $.map(elem, function(val, key) {
        return [val.tagName, val.id 
                ? "#" + val.id : null, val.className ? "." + val.className 
                : null]
      });
      var _setProp = "\n" + selector.join("")
        .concat(_pseudo)
        .concat("{")
        .concat(_prop + ":")
        .concat(newprop + "};");
      ((!!r ? r.test($(s).text()) : r) ? $(s).text(function(index, prop) {
        return prop.replace(r, newprop)
      }) : $(s).append(_setProp));
      return this
    }
  })
})(jQuery);

$(".className").setPseudo(":before", "background", "blue");

.className:before {
  background: red;
  content: "123";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<div class="className">abc</div>

Answer 2

您无法使用javascript更改伪元素的样式，但您可以在<span>内添加.className，然后将其定位。

$('.className span').css('background-color', bgColor);

使用jQuery在选择器之前处理CSS

2 个答案: