javascript - Changing the stylesheet from index.html

Question

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

I'm trying to implement the ability for a User to change theme in my PhoneJS app (might as well be regular JS).

What I've tried:

Index.html

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

Javascript

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

Where sheet is either blue-stylesheet.css or red-stylesheet.css, but I keep getting this error:

Cannot 'setAttribute' for a reference that's undefined or null

So I'm guessing that I can't access the link from my index.html

This is my file structure:

views (folder)
  -> settings (folder)
    ->  settings.js (javascript)

index.html (html with the <link>)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:23:41+0000

Your Javascript is just a little out. Theres no need for the # in the selector.

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