Modifying jQuery CSS causes certain CSS rules from a file to be deleted

Question

Modifying jQuery CSS causes certain CSS rules from a file to be deleted

When using jQuery to change the css of an element, I've noticed that it can remove some previously specified css rules for that element.

For example,

.className, .className2, etc... { 
   background-color: black;
   color    : silver;
}

.className:hover, .className2:hover, etc... { 
   background-color: gray;
   color    : white;
}

In my case, when a user clicks on an element, I want the background to permanently change to indicate it has been clicked. If another sibling element is then clicked, I would like it to revert back to its original css rules and not retain the jQuery-set styles (meaning it loses its rgba background and regains its hover effect).

highlightClicked : function (el) {
        el.css({
            "background-color" : "rgba(70, 70, 70, 0.7)",
            "color" : "white"
            });
        $('#parentElement > span').each(function () {   
            $($(this)).not(el).css({
                "background-color" : "rgba(70, 70, 70, 0.0)",
                "color" : "gray"
            });
        });
    },

However, it appears that the jquery .css function removes these original css rules.

Is there a way to preserve them?

jquery html css

Answer 1

Answer №1

Instead of using the .css() method to modify an element's styles, a more effective approach is to add or remove a class:

HTML

// Add a common class to target elements with jQuery, such as .target
<div class="target className">className</div>
<div class="target className2">className2</div>

CSS

.active, .active:hover { // Do not include .active:hover if you do not want a hover effect
  background-color: red; // Any desired style
  color: #FFF; // Any desired style
}

JQUERY

$(".target").click(function(){
  $(this).addClass("active").siblings(".target").removeClass("active"); // Adds the class to the clicked element and removes it from others
});

EXAMPLE 1

Alternatively, if you want to switch classes for each element individually, you can simply use .toggleClass() like this:

$(".target").click(function(){
   $(this).toggleClass("active");
});

EXAMPLE 2

Answer 2

Instead of using the .css() method to modify an element's styles, a more effective approach is to add or remove a class:

HTML

// Add a common class to target elements with jQuery, such as .target
<div class="target className">className</div>
<div class="target className2">className2</div>

CSS

.active, .active:hover { // Do not include .active:hover if you do not want a hover effect
  background-color: red; // Any desired style
  color: #FFF; // Any desired style
}

JQUERY

$(".target").click(function(){
  $(this).addClass("active").siblings(".target").removeClass("active"); // Adds the class to the clicked element and removes it from others
});

EXAMPLE 1

Alternatively, if you want to switch classes for each element individually, you can simply use .toggleClass() like this:

$(".target").click(function(){
   $(this).toggleClass("active");
});

EXAMPLE 2

Answer 3

Answer №2

While @jmore009's suggestion may be the most effective, it's worth noting that jQuery can also override style sheet rules as mentioned by @webeno. To revert back to the original styles, you can reset the css properties by setting them to an empty string:

el.css({
        "background-color" : "",
        "color" : ""
      });

For a practical example, check out this: http://jsfiddle.net/1ec10ncn/2/

Answer 4

While @jmore009's suggestion may be the most effective, it's worth noting that jQuery can also override style sheet rules as mentioned by @webeno. To revert back to the original styles, you can reset the css properties by setting them to an empty string:

el.css({
        "background-color" : "",
        "color" : ""
      });

For a practical example, check out this: http://jsfiddle.net/1ec10ncn/2/

Modifying jQuery CSS causes certain CSS rules from a file to be deleted

Answer №1

Answer №2

Similar questions

Having trouble with syntax highlighting on Node.js Vash view files in Visual Studio 2015 Update 3?

Is there a way to modify the border shape of items in the navigation bar?

I am curious if there is a feature in intro.js that allows for the highlighting of text or images to

What is the best way to display all of these JSON objects on a webpage given the current AJAX setup?

Unable to obtain the height of a new iframe within the DOM

Exploring through a table using JavaScript

ChartJS has compatibility issues on Windows 10, regardless of the browser being used

Is there a way to integrate jQuery into Mastodon 4.02 with Rails 6 and Webpacker 4?

Bootstrap allows for the creation of five columns of equal width that span the full width of the container

I am not getting any emails when users click on the "Pay Now" button

Fancybox may be difficult to spot when using Safari

Sending a JSONP request to a PHP script

Struggling to designate the active button on an HTML/CSS webpage

ways to remove a specific category from a search

The CSS property object-fit: cover is unable to properly display JPEG images with EXIF orientation greater than 1

What could be causing the 404 Ajax not found error in my script?

What is the best way to incorporate a jQuery script to make an engaging slideshow on my website?

What is the reason behind the issue where max-height disrupts border-radius?

Ensure that the content inside the centrally aligned div is also aligned at the

Strange glitches and slow loading problems plaguing website. (GoDaddy)