Cristian Muscalu Cristian Muscalu - 7 months ago 11
Javascript Question

change css from javascript

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>

Answer

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