Utilize jQuery to dynamically swap out a CSS stylesheet in response to changes in the body class

In the head section of my HTML, I have the following stylesheet:

<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css">

I want to replace this stylesheet with different ones based on changes in the body#main.whatever class (for example, switching between different pages).

For example:

changing from: body#main.itemid113

to: body#main.itemid114

<script>
jQuery(document).ready(function() {

   $('body#main.itemid113').replaceWith('<link rel="stylesheet" id="main" href="/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css" type="text/css" />');

   $('body#main.itemid114').replaceWith('<link rel="stylesheet" id="main" href="/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css" type="text/css" />');

});
</script>

I am struggling to make this change effectively. Can someone guide me on the correct approach?

Would the following solution work?

jQuery(function($){
    if ($('.itemid113').length){
        $('body').append("<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css" type="text/css" />");
    };
    if ($('.itemid114').length){
        $('body').append("<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css");
    }
});
jquerycssreplacestylesheet

Answer №1

To implement this solution effectively, simply include an identifier to your link tag as follows:

<link id="theme" rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css">

Subsequently, update your script to:

jQuery(function($){
    if ($('.itemid113').length){
        $('#theme').attr("href","/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css");
    };
    if ($('.itemid114').length){
        $('#theme').attr("href", "/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css");
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why isn't the JQUERY AJAX request showing up on the PHP page?

I have a total of 3 files - CallTasks.JS, opentask.php, and calltask.php. My goal is to make an AJAX call in CallTasks.JS to reach calltask.php, passing a string value to it and displaying the result on opentask.php. I am utilizing a JQUERY selector to ins ...

phpjqueryajaxpost

Troubleshooting problem with content update upon successful Jquery ajax request

When using the jQuery ajax request below, the "ajaxRenderSuccess" function can take anywhere from 500ms to 1200ms. In order to highlight a new step in the UI before running this function, I first remove the ui-state-highlight class from the previous step ( ...

jqueryajax

Experiencing issues with the jQuery Countdown plugin? Utilize the serverSync function to synchronize server

My serverSync: serverTime Function is supposed to return a value from the server but even though I have confirmed that both the server and client times are the same, when I call the server to sync with the countdown timer, it does not display correctly. ...

c#asp.netjquery

What is the best way to retrieve user input from a form within an Ajax.ActionLink?

My webpage is designed to be simple, featuring a picture and a comment section that functions as a partial view. I am looking to only refresh the partial view when a new comment is submitted. Here's what I have coded: <tr> & ...

javascriptjqueryajaxasp.net-mvcrazor

The MIME type 'text/html' is incompatible with stylesheet MIME type and is not supported

I have exhausted all possible solutions for the issue, from specifying the type for <link rel="stylesheet" href="./style.css" /> to using app.use(express.static('public')), but unfortunately, none of them seem to resolve the problem. index ...

javascriptcssreactjswebpackmime-types

Using jQuery to apply gradient fill to SVG elements

Is it possible to create a gradient fill in an SVG with two or three colors dynamically? Currently, filling an SVG path with just one color can be done easily. Radial gradients are an option but don't offer much flexibility as colors have to be define ...

jquerycsssvgjquery-svgradial-gradients

Display a loading animation before the page loads upon clicking

$("#button").click(function(){ $(document).ready(function() { $('#wrapper').load('page.php'); }); }); <div id="wrapper"></div> <div id="button">click me</div> I would like to display a loading ic ...

javascriptjqueryajaxload

Selecting Options for a Dropdown Menu from a List of String Values

I have a list of weather locations stored in a file called WeatherLocationDatabase.txt that I need to use with the AccuWeather API. The content of the file looks something like this: CityName="Aachen, DE" Location="EUR|DE|GM011|AACHEN" Country="Germany" C ...

jqueryajaxregexlistpopulate

Issue with pushing inner list<object> in Knockout version 3.2.0

Currently, I am working with knockout.js on an ASP application. The issue I am facing involves a list of objects returned by the controller action to the view, where the objects in the list point to another list of objects. My struggle lies in adding new o ...

javascriptc#jqueryknockout.jsknockout-mvc

What is the best way to incorporate animation using Tailwind CSS within my Next.js project?

I have a challenge with placing three images in a circular path one after the other using Tailwind CSS for styling. I've identified the circular path and keyframe style for the images. How do I configure this style in my Tailwind config file and imple ...

javascriptcssreactjscss-animationstailwind-css

Does anyone know of a JavaScript function that works similarly to clientX and clientY but for tooltips when the mouse moves?

When using plain JavaScript to create a function that moves a tooltip on mouse move, the function works the first time with clientX and clientY, but fails to work when repeated. What could be causing this issue with clientX and clientY? Any suggestions on ...

javascripthtmlcss

Direct your attention to an input right after it has been generated

After clicking on a text input, I want to replace it with a password input. The code I have creates the new input, but it does not automatically have focus like I would like. Below is my current code snippet. $('.input_center input:text').click ...

jquery

Modify animation trigger when mouse hovers over

I am looking to create a feature where a slide overlay appears from the bottom of a thumbnail when the user hovers over it, and retracts when the user is not hovering. animations: [ trigger('overlaySlide', [ state(&ap ...

htmlcssangulartypescript

ASP.Net listview that allows users to click on rows to highlight the selected item

Every row in my ASP.net list view is made up of multiple components enclosed in a <div>. I have a two-part question: How can I make these rows clickable to utilize the SelectedIndexChanged event and load data in another user control based on the ...

jqueryasp.netlistview

A transparent float is yielding unexpected outcomes

<!Doctype html> <html> <head> <meta charset="utf-8" /> <title>testing code</title> </head> <body> <div style="float: left; width: 200px; height: 150px; background-color: ...

csscss-float

The JQuery script functions properly when directly embedded in an HTML file, but fails to work when linked from an external file

While I'm working on some code using JQuery's .hover method, I've encountered an interesting issue. It seems to work fine when written directly in the main HTML file index.html, but for some reason, it fails to execute when written in a Java ...

javascripthtmljquery

Learn to Generate a Mathematical Quiz with Javascript

For a school project, I am tasked with developing a Math Quiz which showcases questions one at a time. The questions vary in type, including Multiple Choice, Narrative Response, Image Selection, Fill in the blank, and more. I require assistance in creatin ...

javascriptjqueryhtmlcssbootstrap-4

Troubleshooting: CSS border-radius issue with embedded iframe

I am struggling to embed an iframe from my Blogger site into a specific section on my website and round its corners using CSS. I followed a tutorial that suggested using overflow: hidden;, but for some reason, it's not working in my case - see the ima ...

htmlcssiframe

Increase the spacing around the content in a textfield

I'm trying to figure out how to prevent text in a textfield from extending all the way to the end of the field. My setup includes a textfield with a background image and a button positioned on the right side of the textfield. I want to ensure that the ...

htmlcsstexttextboxpadding

Modifying Jquery script to maintain the effect continuously instead of just on hover

Recently, I came across a pulsing effect online that only works on hover. However, I want it to be a continuous effect and I'm not sure how to modify it to remove the hover requirement. The callbacks in jQuery are a bit confusing for me but I'm s ...

jquerypulse