Allowing users to customize the design of a web page can enhance the interactivity and user experience of the site. One way to achieve this is by dynamically switching stylesheets (CSS files) using JavaScript. In this article, we will discuss how to switch between multiple CSS files using styleswitch.js.
When users can freely change the design of a web page, it is possible to provide a look that suits their preferences, which may increase the time they spend on the page. For example, you can switch between themes that are easier to view during the day and at night or increase the font size for better readability.
Here, we will explain everything from basic concepts to specific implementation methods, so please read to the end.
What is styleswitch.js?
styleswitch.js is a JavaScript file that allows users to dynamically switch the stylesheet of a web page through actions like clicking. This script enables style changes without reloading the page, providing a better user experience.
Why is stylesheet switching important?
Switching stylesheets is particularly important in the following scenarios:
- Improved accessibility: Users can adjust text size and contrast to make the page more readable.
- Customization: Easily change designs to match brands or events, which is also useful from a marketing perspective.
- Providing themes: Offering users the ability to choose a theme that suits their preferences, creating a personalized experience.
Thus, using styleswitch.js to switch stylesheets is a powerful tool for enhancing the functionality of a web page.
Loading the styleswitch.js file
First, you need to load the styleswitch.js file into your HTML. This file provides the main functionality for switching stylesheets. Add the script tag to your HTML as follows:
<script src="styleswitch.js" type="text/javascript"></script>
This script provides the functions needed to change stylesheets based on user actions. Next, we will see how to prepare and switch the stylesheets in detail.
Preparing three CSS files
In this example, we will prepare three different CSS files and create a mechanism to switch between them based on the user’s selection. These files will make significant visual differences by changing the background color, text size, and text color. The role and content of each CSS file are shown below.
default.css: The default stylesheet
default.css is the basic stylesheet that is loaded when the page is first opened. The content of this stylesheet is as follows:
<link rel="stylesheet" type="text/css" href="default.css" />
- Background color: White (#FFF)
- Text color: Black (#000)
- Text size: 14px
- Layout: A 600px wide container centered
body{
background-color:#FFF;
color:#000;
font-size:14px;
margin:0;
padding:0;
}
#idWrap{
width:600px;
margin:0 auto;
text-align:left;
}
This style provides a simple and readable design, serving as the baseline when switching to other styles.
css1.css: Switchable stylesheet 1
css1.css is a stylesheet that provides a dark theme, commonly used in night modes.
<link rel="alternate stylesheet" type="text/css" media="screen" title="title1" href="css1.css" />
- Background color: Dark Gray (#333)
- Text color: White (#FFF)
- Text size: 18px
body{
background-color:#333;
color:#FFF;
font-size:18px;
margin:0;
padding:0;
}
#idWrap{
width:600px;
margin:0 auto;
text-align:left;
}
This style emphasizes contrast for better visibility and is designed to reduce eye strain during prolonged viewing.
css2.css: Switchable stylesheet 2
css2.css is a stylesheet that provides a bright and pop design, suitable for events or campaigns.
<link rel="alternate stylesheet" type="text/css" media="screen" title="title2" href="css2.css" />
- Background color: Light Orange (#FF9)
- Text color: Blue (#09F)
- Text size: 24px
body{
background-color:#FF9;
color:#09F;
font-size:24px;
margin:0;
padding:0;
}
#idWrap{
width:600px;
margin:0 auto;
text-align:left;
}
This style gives a lively and energetic impression, attracting users to the page.
HTML code to switch loaded stylesheets (CSS files) using styleswitch.js
Next, write the HTML that allows users to switch styles by clicking. In this method, you embed the script in the a tag to change the appearance of the page based on the selected style. By specifying the title attribute name of the link tag in chooseStyle(title name of the link tag to switch, 30) in the a tag href, you can switch by clicking the a tag.
<div id="idWrap">
<h1>Click the link below to switch the loaded stylesheet (CSS file).</h1>
<ul>
<li><a href="javascript:chooseStyle('none', 30)">Default</a></li>
<li><a href="javascript:chooseStyle('title1', 30)">Style 1</a></li>
<li><a href="javascript:chooseStyle('title2', 30)">Style 2</a></li>
</ul>
</div><!--/idWrap-->
The chooseStyle function used here is defined in styleswitch.js and is responsible for activating the specified style. By clicking the link, the corresponding CSS file is loaded, and the appearance of the page changes instantly.
The mechanism of style switching in JavaScript
Inside the chooseStyle function, the following processes are performed:
- Search for existing stylesheets: Search for all currently applied stylesheets and identify those that can be switched.
- Apply the new stylesheet: Activate the stylesheet with the specified title and deactivate the others.
- Set a cookie: Save the style selected by the user in a cookie so that the same style is automatically applied the next time they visit.
In this way, styleswitch.js can flexibly change the style of a web page according to the user’s actions.
Demo page to switch loaded stylesheets (CSS files)
By creating a working demo page, you can try out these features. Check the demo page from the link below to see how the stylesheet switching works.
Demo page to switch loaded stylesheets (CSS files)
This demo page allows you to see how the design changes by clicking the links, using the HTML and CSS mentioned above. Let’s see how the design changes occur in real time.
Source: Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)
Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)
Conclusion
In this article, we detailed how to switch stylesheets using styleswitch.js. By utilizing this technique, you can offer users a more flexible and engaging web experience. Switching stylesheets not only contributes to improved accessibility and user experience but also serves as a tool to expand the possibilities of web design.
Please consider incorporating a style switching feature into your website using this article as a reference. I hope this helps you explore new design possibilities.
*If you reuse this content, please do so at your own risk.
Please do not use the Google Analytics tags in the demo page tag.
