Multiple CSS option for users [closed]

前端未结

关注

 6  1639

春和景丽

相关标签:

6条回答

感情败类

2021-01-17 09:48
If you are asking "How can I switch between the two stylesheets when a user clicks one of the links", I would sugest the following approach:
- Leave your default stylesheet as is.
- Preface all your style declarations in your second stylesheet with some unique class, i.e. alternative-css
- When the user clicks on the "alternative" link, add a class to a high level element (such as <html>, <body> or wrapper <div>
For example:

HTML:
```
<body>
    <a href="#" id="main">Main Style</a>
    <a href="#" id="alt">Alternative Style</a>
    <div id="wrapper">
        <p>Some text</p>
    </div>
</body>
```
Stylesheet:
```
#wrapper {
    background: #000;
}
p {
    color: #fff;
}
```
Alternative Stylesheet:
```
.alternative-css #wrapper {
    background: #fff;
}
.alternative-css p {
    color: #000;
}
```
JS:
```
$('#main').click(function(){$('body').removeClass('alternative-css')});
$('#alt').click(function(){$('body').addClass('alternative-css')});
```
PS: I know you didn't tag this question with jQuery... but this is meant more as a concept and it shouldn't be too hard to write the click handlers in vanilla JS.
0 讨论(0)
发布评论:

提交评论
- 加载中...
广开言路

2021-01-17 09:48
It does not work because you have both files being loaded when the page loads. So of course it will be the color of the second file from the start since both files are there.

The page needs to start with one file.

Other option is you load both files, but the rules are based off a class on the body.

file1.css
```
body { background-color: yellow; }
h1 { color: red }
```
file2.css
```
body.alt {background-color: green; }
body.alt h1 { color : blue; }
```
And with the JavaScript you add the class.
```
document.body.className = document.body.className==="alt" ? "" : "alt";
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
栀梦

2021-01-17 10:00
You can always add another external CSS file dynamically with JavaScript (or in this case jQuery):
```
$('head').append('<link rel="stylesheet" href="/alternative.css" type="text/css" />');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2021-01-17 10:01

Create a default stylesheet for the site and create other stylesheets for the specific users. Then override default styles with them with javascripts or php

0 讨论(0)
发布评论:

提交评论
- 加载中...
时光说笑

2021-01-17 10:01
The easiest way to do this that I have found is to set a class in the <body> tag and use one CSS file, but defining two sets of CSS definitions, prefixing each set with a class name.

Set a default class (e.g., <body class="bodyClass1">) and then, when you want to change the look, you simply update the class to the other class using JavaScript.

The benefits of this are that, all classes are loaded at page load and any common styles can be coded outside of the "class specific" definitions.

Example:
```
body {...}
a {...}
div {font-weight: bold;}

.bodyClass1 div {font-size: 10px;}

.bodyClass2 div {font-size: 12px;}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
日久生厌

2021-01-17 10:09
You can just disabled/enable the second stylesheet via the disabled property:
```
document.getElementById('css2').sheet.disabled = true;
```
or the whole <link> element:
```
document.getElementById('css2').disabled = true;
```
That way the declarations will not overwrite the ones from the first. Your try of changing the href of the link would work as well, yet for that you would need only one <link> tag that is switched between "css1.css" and "css2.css".
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题