Change the CSS of a selector using jQuery before it is triggered

Question

Change the CSS of a selector using jQuery before it is triggered

I am attempting to manipulate the CSS :before and :after selectors using jQuery. Despite trying various methods, it appears that the DOM is unable to access these CSS selectors. My goal is to dynamically change the background-color of an element.

For instance:

.className:before {background: red;}

Eventually, I aim to update this color dynamically:

$('.clasName:before').css('background-color', bgColor);   //this approach does not seem to work

I have also attempted:

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

CSS

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

Unfortunately, neither of these methods are successful. Is there a workaround for this specific issue?

javascript jquery html css

Answer 1

Answer №1

(function($) {
  jQuery.fn.extend({
    retrievePseudo: function(pseudo, property) {
      var props = window.getComputedStyle(
        $(this.selector).get(0), pseudo
      ).getPropertyValue(property);
      return String(props);
    },
    modifyPseudo: function(_pseudo, _property, newProperty) {
      var element = $(this);
      var styleElement = $("style");
      var currentProperty = element.retrievePseudo(_pseudo, _property);
      console.log(currentProperty)
      var regex = currentProperty !== "" ? new RegExp(currentProperty) : false;
      var selector = $.map(element, function(value, key) {
        return [value.tagName, value.id 
                ? "#" + value.id : null, value.className ? "." + value.className 
                : null]
      });
      var modifiedProperty = "\n" + selector.join("")
        .concat(_pseudo)
        .concat("{")
        .concat(_property + ":")
        .concat(newProperty + "};");
      ((!!regex ? regex.test($(styleElement).text()) : regex) ? $(styleElement).text(function(index, prop) {
        return prop.replace(regex, newProperty)
      }) : $(styleElement).append(modifiedProperty));
      return this
    }
  })
})(jQuery);

$(".className").modifyPseudo(":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

(function($) {
  jQuery.fn.extend({
    retrievePseudo: function(pseudo, property) {
      var props = window.getComputedStyle(
        $(this.selector).get(0), pseudo
      ).getPropertyValue(property);
      return String(props);
    },
    modifyPseudo: function(_pseudo, _property, newProperty) {
      var element = $(this);
      var styleElement = $("style");
      var currentProperty = element.retrievePseudo(_pseudo, _property);
      console.log(currentProperty)
      var regex = currentProperty !== "" ? new RegExp(currentProperty) : false;
      var selector = $.map(element, function(value, key) {
        return [value.tagName, value.id 
                ? "#" + value.id : null, value.className ? "." + value.className 
                : null]
      });
      var modifiedProperty = "\n" + selector.join("")
        .concat(_pseudo)
        .concat("{")
        .concat(_property + ":")
        .concat(newProperty + "};");
      ((!!regex ? regex.test($(styleElement).text()) : regex) ? $(styleElement).text(function(index, prop) {
        return prop.replace(regex, newProperty)
      }) : $(styleElement).append(modifiedProperty));
      return this
    }
  })
})(jQuery);

$(".className").modifyPseudo(":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 3

Answer №2

Modifying the appearance of pseudo elements using JavaScript is not possible, however a workaround is to insert a <span> within your .className and style that instead.

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

Answer 4

Modifying the appearance of pseudo elements using JavaScript is not possible, however a workaround is to insert a <span> within your .className and style that instead.

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

Change the CSS of a selector using jQuery before it is triggered

Answer №1

Answer №2

Similar questions

Exploring the intricacies of multidimensional array scopes in AngularJS

Prevent elements from overlapping within a flexbox container

In JavaScript, what is the best way to target the initial option element in HTML?

Pass the variable to another page (Deliver a message)

Tips for refreshing the tawk.to widget when the language changes with the help of i18next

Flask fails to recognize JSON data when transmitted from Nodejs

Troubleshooting Jquery Ajax Failure in Laravel 4

Missing Home and Search icons on Jquery mobileNavigationBar

Switching Images with Rounded Border on Hover Effect

JavaScript - Struggles with developing a personalized AJAX function

Discovering mongoose records by comparing against a collection of substrings: A step-by-step guide

Adjusting the height of each suggested item in Jquery autocomplete

Implementing a password toggle feature on a form that extends Django's default Authentication Form

Changing the size of a dynamic watermark png in php

Issue encountered: Unable to add MongoDB object to database

Is there a way to locate a specific word within a sentence using JavaScript

Is Dealing with Multiple AJAX Requests a Pain?

What exactly is the purpose of the double ampersand selector, '&&', when it comes to overriding the root class with makeStyles within Material-UI React?

Selenium's Unpredictable Data Points

Progress bar enabled JavaScript file uploader