Programmatically changing the stylesheet does not seem to be working to apply the

Question

Programmatically changing the stylesheet does not seem to be working to apply the

I'm currently working on a feature that allows the User to customize the application's style.

Index.html

<!DOCTYPE html>
<html>
    <head>
        <link id="style" rel="stylesheet" type="text/css" href="red-stylesheet.css" />
    </head>
</html>

Javascript

function changeStyle(sheet) {
    document.getElementById('style').setAttribute('href', sheet);
}

Despite my best efforts, I'm facing an issue with changing styles. By default, the theme is set to red, but when I attempt to switch to blue, all styling disappears and I can't revert back to the red theme.

What steps should I take next?

(PhoneJS/DevExtreme application)

Initial App Appearance

https://i.sstatic.net/hgDSH.png

After Selecting "Blue" Option

https://i.sstatic.net/lms7i.png

javascript css

Answer 1

Answer №1

Here is a helpful tip:

$('head>link[type="text/css"]').attr('href',newSheet);

Answer 2

Here is a helpful tip:

$('head>link[type="text/css"]').attr('href',newSheet);

Answer 3

Answer №2

-----------Give This a Shot -----
Check out this code snippet to see it in action

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function switchStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<h3>Changing Stylesheets Dynamically with JavaScript</h3>
<button onclick="switchStyleSheet('dark.css')">Dark Theme</button>
<button onclick="switchStyleSheet('default.css')">Default Theme</button>
</body>
</html>

Answer 4

-----------Give This a Shot -----
Check out this code snippet to see it in action

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function switchStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<h3>Changing Stylesheets Dynamically with JavaScript</h3>
<button onclick="switchStyleSheet('dark.css')">Dark Theme</button>
<button onclick="switchStyleSheet('default.css')">Default Theme</button>
</body>
</html>

Programmatically changing the stylesheet does not seem to be working to apply the

Answer №1

Answer №2

Similar questions

Experiencing problems with malfunctioning javascript tabs

Make sure to close any existing Featherlight windows before trying to open another one

An error occurred with Express and Passport: ['ERR_HTTP_HEADERS_SENT']

Enhancing TypeScript Types with a custom method within an Angular 2 context

The absence of AudioPlayer may be responsible for the compilation failure on Vercel

Exploring package.json: Uncovering the Installed Components of a Module

Ways to refresh a div element without causing it to blink

Arrange the div next to each other

Ways to adjust the location of the scrollbar using CSS

When jQuery updates the content, the div content disappears temporarily

Is there a way to modify initialValue's value following every iteration?

Manipulate JSON objects in AngularJS by deleting or adding items

Form Validation Using a Separate Function

What could be causing the slow compilation of my Next.js pages within the app directory, and what steps can be taken to improve the speed of this

The challenges of updating AngularJS partial templates and handling refresh in 2-way binding

ISO 8 takes a different approach by disregarding the meta viewport tag and autonomously adjusts the website layout to

displaying the identical image from various perspectives

"Learn the process of extracting information from a database and exporting it to a CSV file with Angular 2

Eliminate items from a list that have duplicate properties

Is it possible to use the Stop Button on the HTML5 Audio Tag to halt a live MP3 stream