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 ?
Add a comment
|
3 Answers
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.
Comments
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.)
Comments
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]
- masterpage (Master Page Gallery)
remove the following from <head>:
<Sharepoint:CssLink runat="server"/>
Comments
