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

Incorporating a drag functionality to choose a range of dates from a calendar with the help of CLNDR.js

Tips for Controlling an Absent Search Bar in the HTML Source Code with Selenium

Unable to proceed due to lint errors; after conducting research, the issue still remains

Transfer the selected value from the initial dropdown menu to the second dropdown menu seamlessly without the need to

The jQuery CSS menu is having trouble highlighting the active link

Winning opportunities created by using credits in the slot machine

What is the best way to make ng-style append to a pre-existing style?

Margin ambiguity in a vue.js application

The combination of sass-loader and Webpack fails to produce CSS output

changing the action URL of a jQuery form dynamically upon submission

How can I extract the value of a JavaScript variable using jsoup in an HTML document?

Is it possible to create an <h1> heading that can be clicked like a button and actually do something when clicked?

Hamburger Icon in Bootstrap Navbar-Brand is not aligned as expected

Issues with NativeScript WebView displaying HTML file

Generate a div dynamically and incorporate a function that triggers on click event dynamically

A guide to sending HTML emails with the Linux command line

Discover the ultimate guide to creating an interactive website using solely JavaScript, without relying on any server-side

What is causing me to repeatedly encounter the 403 forbidden error?

Pass a JavaScript variable to a PHP script using AJAX when a button is clicked, with a dynamically set href attribute

What is the process to retrieve a variable from a Node.js file in an HTML document?