Is it possible to change SharePoint CSS via javascript?

Question

I am working on Sp2013 site and want to change the opacity of the overlay. This is the CSS that needs to be used:-

.ms-core-overlay {
    background-color: rgba(255, 255, 255, 0.5);
}

I am setting the opacity from 0.85 to 0.5. I donot want to create a new css file and link it to the masterpage so I was trying to chagne the CSS via javascript on masterpage. Foll. is my code which is pasted right above the </head> tag:-

<script language="javascript">
   _spBodyOnLoadFunctionNames.push("HideBrandingsuite");
    function HideBrandingsuite()
     {
     alert('test');
     var elem = document.getElementById("ms-core-overlay");
elem.style.background-color = "rgba(255, 255, 255, 0.5)";
     }
    </script>

I can see the alert box, but the the overlay isnt getting updated with new opacity. Pls guide.

Is it possible to use <style> tag on the masterpage before the </head> tag to achieve the purpose? Example:- This doesnot work for me...

<style>
 .ms-core-overlay {
        background-color: rgba(255, 255, 255, 0.5);
    }
</style>

Answer 1

If your style is static try these steps:

1. Check core styles for an important declaration
2. Add style element to the page (content editor web part or directly in the master page)
3. Сlarify selector expression .someclass .ms-core-overlay

Answer 2

You need to use jquery $document.ready so that code will be executed only when the entire html and css has been loaded, the way you did it, it will be executed at the beginning when there is no guarante the page has finished rendering

also you should jquery selectors.

$("ms-core-overlay")