CODEWITHSUNDEEP
javascriptjqueryhtmlcss
rougeOne
rougeOne

Reputation: 37

How to update a div's style background-color to none using jQuery

My brain is going crazy on figuring out how to modify the background color within a div that has a class, with an inline style controlling the color of the div.

I'd like to know how I would be able to change the background color from within one div but leave the other div's background color intact. As you can see, the div's contain the same class names, but the inline style color is what I'm trying to update. I'm also unable to modify the structure of the html page, otherwise, this would be a piece of cake.

With a css class I can write something like this to look at the current class and replace it with another class but In this situation this isn't an option since this syntax would change all the divs with the similar divs.

$('.tx-cal-event').toggleClass({"sx-abc-event"});


<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(182, 232, 198);"></div>
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(128, 128, 128);"></div>
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(166, 166, 166);"></div>

I imagine to somehow identify the one color in a div and make it transparent via a button. I have the button variable but its the actual syntax for changing the color when it is referenced in an inline style element.

Any help would be appreciated.

Upvotes: 1

Views: 1925

Answers (5)

Charanraj Golla
Charanraj Golla

Reputation: 1102

Based on the code pen snippet I modified the selector to use the pseudo selector. This snippet hides the other two divs and retains the styling for the 1st one.

Code Pen link :https://codepen.io/charanrajgolla/pen/MQeYmB
More information about n-th Child can be found over here: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

Code Sample :

$(document).ready(function() {
  $("button").click(function() {
$(this).parents('.dimensions').find('p:nth-child(2n+1), p:last-child').fadeToggle(700);
  });
});
/* This is the css in question */

.tx-cal-event {
	color: black;
	font-family: "ABeeZee";
}

.sx-abc-event {
	font-size:100%;
	background-color: #CCC!important;
	border-radius: 2px;
	overflow: hidden;
}

.nx-cal-event-month {
  padding: 20px;
  border-radius: 3px;
}

/* this css is for formatting of the elements and not important in finding what is being asked for */
body {
	background-color: #000;
  font-size: 80%;
  color: black;
}
.dimensions { 
  width: 300px;
  margin: 0 auto;
  padding-top: 20px;}

.btn-css {
  background: rgb(0,112,210);
  color: white;
  padding: 10px 20px 10px 20px;
  border: none;
  border-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dimensions">
  <button class="btn-css">Click Button</button>
    <p class="tx-cal-event nx-cal-event-month" style="background-color: rgb(182, 232, 198);">
If I click the button, 1 and 2 should be hidden, but this row should remain visible, alongwith keeping the background-color value of <br>rgb(182, 232, 198).</p>
    <p class="tx-cal-event nx-cal-event-month" style="background-color: rgb(128, 128, 128);">1. This Should Dissappear</p>
    <p class="tx-cal-event nx-cal-event-month" style="background-color: rgb(166, 166, 166);">2. This Should Dissappear</p>
  </div>

Upvotes: 1

Omar Muscatello
Omar Muscatello

Reputation: 1301

To remove the inline style property use css method with an empty string as second parameter:

Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. As a consequence, the element's style for that property will be restored to whatever value was applied.

Usage

$('.tx-cal-event').css('background-color', '');

Upvotes: 0

Bhuwan
Bhuwan

Reputation: 16855

Change background-color to initial using css() jQuery. No need to use !important

Stack Snippet

$("div.nx-cal-event.nx-cal-event-month").css({
  "background-color": "initial"
});
.nx-cal-event.nx-cal-event-month {
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(222, 174, 234);"></div>

Upvotes: 0

Upendra Joshi
Upendra Joshi

Reputation: 611

you can try $('#tx-cal-event').css({'background-color':'transparent'});

Upvotes: 1

Muhammad Tarique
Muhammad Tarique

Reputation: 1437

Try below jquery:

$('.tx-cal-event').css('background-color', 'transparent !important');

Or define this css in you class like below

<style>
 .bg-none{
    $background-color: transparent !important;
  }
</style>

// Then in your javascript
<script>
 $('.tx-cal-event').addClass('bg-none');
</script>

Upvotes: 0

Related Questions