I have a page with a couple CSS files. I want to call a new CSS file (not present on page load) when a button is clicked. I want the other CSS files to remain unchanged though.
This works - but, it seems to replace ALL the css files and ONLY pulls styles from the new one I call. How can I keep the existing styles in place and only override what I'm targeting in this new file?
$(function () {
$('button').click(function () {
$('link').attr('href', 'foo.css');
});
});
function addStyles(url){
$('<link href="'+url+'" rel="stylesheet"/>').appendTo('head');
}
$(function () {
$('button').click(function () {
addStyles('foo.css');
});
});
Actually, you are replacing attributes of link element(s) on your page. What you should do is creating new element and appending this newly created element to the page.
/*create new element */
var newLinkElement = $('<link>').attr('href', 'foo.css');
/*append to head*/
$('head').append($(newLinkElement));
Just append to the header
$('head').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');
