change css from javascript

Question

I need to change this

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

into this:

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

, but don't have access to edit neither html or css files!

The only thing i can do is add a small javascript code inside the footer section.

This is few examples of what i tried so far, but seems i'm going in wrong direction.

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>

#1 script should do what you need... only use 'background-color' instead of 'background' — ann0nC0d3r
– ann0nC0d3r, Commented Apr 28, 2016 at 17:59
^ given that jquery is loaded, otherwise stay away from $ or jQuery, you can simply do document.getElementById("Element_ID").style.backgroundColor="rgba(255, 255, 255, 0.7)"; — chrismillah
– chrismillah, Commented Apr 28, 2016 at 18:01
It may be being overridden. Try placing !important at the end... 'rgba(255, 255, 255, 0.7) !important' just to see if it takes effect. This is not good practice though to just chuck !important at the end ;-) — ann0nC0d3r
– ann0nC0d3r, Commented Apr 28, 2016 at 18:05

sadpanda · Accepted Answer · 2016-04-28 18:08:07Z

2

Maybe something like this?

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;}’);

answered Apr 28, 2016 at 18:08

sadpanda

2131 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

damo-s Over a year ago

Something along these lines is what I would have answered.

Cristian Muscalu Over a year ago

Your solution looks interesting, but not working. I will play with it in jsfiddle to get a better understanding.

sadpanda Over a year ago

Make sure the new style tag is appended AFTER the initial one that sets the rule

Cristian Muscalu Over a year ago

Since i don't have access to any files, all i can think about is using jQuery $(document).ready(function addNewStyle(newstyle) {your code}

Cristian Muscalu Over a year ago

It worked, after finnally! seing the typo at the end. It's ' instead of ’ :p

Quentin · Accepted Answer · 2016-04-28 18:08:50Z

The problem is that the CSS rule is !important and the rule you are adding is not.

jQuery doesn't provide an API for setting important rules so you need to go down to the DOM for that.

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

Collectives™ on Stack Overflow

change css from javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related