Sharepoint: Changing CSS with javascript

Question

I have spent far too many hours searching the internet for a possible solution but have had no luck.

I am trying to make a change to my SharePoint master page.

I would like this:

div#s4-ribbonrow {
min-height: 0px !important;
height: 24px !important;
}

to be implemented in javascript (I want to be able to apply the code above conditionally).

I have tried:

<script type="text/javascript">
$(".s4-ribbonrow").attr('style', 'minHeight:0px !important');
$(".s4-ribbonrow").attr('style', 'height:24px !important');
</script>

and:

<script type="text/javascript">
document.getElementById('s4-ribbonrow').style.cssText = 'minHeight:0px !important';
document.getElementById('s4-ribbonrow').style.cssText = 'height:24px !important';
</script>

and many variations of this, but have not gotten anywhere!

The CSS itself works, so I'm sure there must be a reason why the javascript itself is not working.

Any help would be greatly appreciated!

Thanks,

Jon

Answer 1

尝试这个

document.getElementById('s4-ribbonrow').setAttribute('style', 'height:24px;minHeight:0px;');

Answer 2

Problem solved! Even if only in an ugly way...

I saved the CSS content in a CSS file and stored it on the web server.

I then used javascript to load the CSS, using my conditional IF statement.

It worked!

I know how useful sites such as these are for people searching for answers, so here is the code I used (no credit to me, I took this from another question answered on the site - can't remember which one):

var $ = document; // shortcut
var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!$.getElementById(cssId)) // ensures this is only loaded once (not sure if necessary or not)
    {
        if ( UserOnly )
            {
                var head  = $.getElementsByTagName('head')[0];
                var link  = $.createElement('link');
                link.id   = cssId;
                link.rel  = 'stylesheet';
                link.type = 'text/css';
                link.href = 'LINK_TO_CSS_FILE_HERE';
                link.media = 'all';
                head.appendChild(link);
             }
    }

I'm not sure why the javascript calls to alter the CSS did not work, but this indirect solution has done the trick.

Hopefully this comes in handy for someone else facing the same problem!

Cheers,

Jon

Answer 3

I know it´s probably something you already thought of... but did you execute your javascripts to alter the css after everthing was loaded? Eg using ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js"); or _spBodyOnLoadFunctionNames.push("doTheCssStuff"); I´m not sure, but maybe your script does change the css properties but they get "rechanged" by SharePoint afterwards...