Question

我需要改变这个

body.sidebar_b .sidemenu {
background-color: rgba(0, 0, 0, 0.7) !important;
}

进入这个：

body.sidebar_b .sidemenu {
background-color: rgba(255, 255, 255, 0.7) !important;
}

，但无权编辑html或css文件！

我唯一能做的就是在页脚部分添加一个小的javascript代码。

这是我到目前为止所尝试的几个例子，但似乎我的方向是错误的。

1#
<script>
$(document).ready(function() {
    $('body.sidebar_b .sidemenu').css({
'background-color' : 'rgba(255, 255, 255, 0.7)'
});
});
</script>

2#
<script>
$(document).ready(function(){
  var cols = document.getElementsByClassName('sidemenu');
  for(i=0; i<cols.length; i++) {
  cols[i].style.backgroundColor = 'white';
 }
 });
</script>

Answer 1

也许是这样的？

function addNewStyle(newStyle) {
    var styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(styleElement);
    styleElement.appendChild(document.createTextNode(newStyle));
}

addNewStyle('body.sidebar_b .sidemenu { background-color: rgba(255, 255, 255, 0.7) !important;}’);

Answer 2

问题是CSS规则是！important ，而您添加的规则则不是。

jQuery doesn't provide an API for setting important rules所以你需要深入了解DOM。

$(document).ready(function() {
  $('body .sidebar_b .sidemenu').each(function() {
    console.log(this);
    this.style.setProperty("background-color", "rgba(255, 255, 255, 0.7)", "important");
  });
});

body .sidebar_b .sidemenu {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: white;
}
body {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar_b">
  <div class="sidemenu">
    Note that the class has been moved off the body for the same of this demo
  </div>
</div>

从javascript更改css

2 个答案: