如何使用 jQuery 将 div 的样式背景颜色更新为无

Question

我的大脑正在疯狂地弄清楚如何在具有class 的div 中修改background color，并使用内联样式控制 div 的颜色。

我想知道如何在一个 div 中更改背景颜色，但保持另一个 div 的背景颜色不变。如您所见，div 包含相同的类名，但内联样式颜色是我要更新的。我也无法修改html页面的结构，否则，这将是小菜一碟。

使用 css 类，我可以编写类似这样的内容来查看当前的 class 并将其替换为另一个 class 但在这种情况下，这不是一个选项，因为此语法会更改所有具有类似div。

$('.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>

我想以某种方式识别 div 中的一种颜色并通过按钮使其透明。我有 button 变量，但它是在内联样式元素中引用它时更改颜色的实际语法。

任何帮助将不胜感激。

Answer 1

试试下面的jquery：

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

或者像下面这样在你的类中定义这个css

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

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

Answer 2

你可以试试 $('#tx-cal-event').css({'background-color':'transparent'});

Answer 3

使用css() jQuery 将background-color 更改为initial。不用!important

堆栈片段

$("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>

Answer 4

要删除内联样式属性，请使用css 方法，并将空字符串作为第二个参数：

将样式属性的值设置为空字符串——例如$( "#mydiv" ).css( "color", "" ) — 如果该属性已被直接应用，则从元素中删除该属性，无论是在 HTML 样式属性中，通过 jQuery 的 .css() 方法，还是通过直接应用样式属性的 DOM 操作。因此，该属性的元素样式将恢复为应用的任何值。

用法

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

Answer 5

基于代码笔 sn -p 我修改了选择器以使用伪选择器。这个 sn-p 隐藏了其他两个 div 并保留了第一个的样式。

代码笔链接：https://codepen.io/charanrajgolla/pen/MQeYmB
更多关于第 n 个孩子的信息可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

代码示例：

$(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>