When styling SharePoint sites, it can be very useful to add specific styles to specific “pages” or views. Here’s a bit of jQuery/javascript code to make that possible. It works by grabbing the page location turning it into classes that are added to the body tag.
jQuery(document).ready(function($){
//use a javascript variable to hold the results of jQuery's "find the body tag" call
var $body = $('body');
//use a variable to capture and store the page url, also removing the 'http(s)://'
var url = window.location.href.replace(/http[s]?:\/\//, '');
//replace any .html, .asp(x), .php or .jsp file extensions
url = url.replace(/\.(htm[l]?|asp[x]?|php|jsp)$/,'');
//replace any '.' with '_' - ie. 'example.com' will become 'example_com'
url = url.replace(/[.]/g, "_");
//Wherever there is a '/', split url into a segment
var segments = url.split('/');
//Take these segments and add them as classes to the body
for (var i = 0; i < segments.length; i++) {
$body.addClass(segments[i]);
}
});
For servers that prefer case sensitivity but allow either case to work (like SharePoint), and where that may cause unwanted headaches you can replace the line where we first define 'var url' with this:
var url = window.location.href.toLowerCase().replace(/http[s]?:\/\//, '');