CODEWITHSUNDEEP
jquerycsssharepoint
Michael Sablatura
Michael Sablatura

Reputation: 187

How do stop a CSS file from rendering with jQuery?

I am building a website on a Sharepoint server that has specific CSS files rendering that I cannot access or remove. Is it possible with jQuery to remove these style sheets from the DOM before rendering ? or can I specify certain elements on the page to only adhere to specific css styles without rendering others from this file ?

Upvotes: 0

Views: 1467

Answers (3)

harpo
harpo

Reputation: 43168

This code disabled the stackoverflow stylesheet in the Firebug console.

var href = "http://sstatic.net/stackoverflow/all.css?v=84b08398d3dc";
jQuery('link[rel=stylesheet][href="' + href + '"]').get(0).disabled = true

As with all javascript, it could done without jQuery. And I'm assuming that you have a good reason for resorting to a javascript solution when the obvious way to disable a stylesheet is to remove the reference in the HTML.

(Adapted from this post, which shows how to switch stylesheets using jQuery.)

Upvotes: 1

MikeM
MikeM

Reputation: 27405

You mentioned not having access to removing the CSS files from SharePoint...

Does that mean you don't have access rights to the Masterpage file? I'd recommend trying to edit the masterpage if at all possible before using a jQuery workaround.

If you can gain access to the Masterpage, you can remove references to the Sharepoint specific CSS files there.

in Sharepoint Designer

  • _catalogs
    • masterpage (Master Page Gallery)
      • [YourMasterPageFile]

remove the following from <head>:

<Sharepoint:CssLink runat="server"/>

Upvotes: 0

Oren Hizkiya
Oren Hizkiya

Reputation: 4434

Is there a reason you want to use JQuery over plain Javascript?

You can use this Javascript to replace an external stylesheet.

function createjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 return fileref
}

function replacejscssfile(oldfilename, newfilename, filetype){
 var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
 var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
 var allsuspects=document.getElementsByTagName(targetelement)
 for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
  if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
   var newelement=createjscssfile(newfilename, filetype)
   allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
  }
 }
}

replacejscssfile("oldscript.js", "newscript.js", "js") //Replace all occurences of "oldscript.js" with "newscript.js"
replacejscssfile("oldstyle.css", "newstyle", "css") //Replace all occurences "oldstyle.css" with "newstyle.css"

Read more on this page.

Upvotes: 2

Related Questions