Question

我的大脑在弄清楚如何修改具有background color的{{1}}内的div，并使用内联样式控制div的颜色。

我想知道如何从一个div中更改背景颜色，但保留其他div的背景颜色。正如您所看到的，div包含相同的类名，但内联样式颜色是我尝试更新的颜色。我也无法修改html页面的结构，否则，这将是一块蛋糕。

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

class

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

任何帮助都将不胜感激。

Answer 1

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

Answer 2

基于代码笔片段，我修改了选择器以使用伪选择器。这个片段隐藏了另外两个div并保留了第一个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>

Answer 3

尝试以下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 4

使用background-color jQuery将css()更改为初始。无需使用!important

Stack Snippet

＆＃13;

$("div.nx-cal-event.nx-cal-event-month").css({
  "background-color": "initial"
});

＆＃13;

.nx-cal-event.nx-cal-event-month {
  height: 100px;
}

＆＃13;

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

＆＃13;

Answer 5

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

将样式属性的值设置为空字符串 - 例如$（＆＃34; #mydiv＆＃34;）。css（＆＃34; color＆＃34;，＆＃34;＆＃34;） - 如果元素已经直接应用，则从元素中删除该属性，无论是HTML样式属性，通过jQuery的.css（）方法，或通过样式属性的直接DOM操作。因此，该属性的元素样式将恢复为所应用的任何值。

用法

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

如何使用jQuery将div的样式background-color更新为none

5 个答案: