Lesson Code: http://www.developphp.com/video/JavaScript/Change-Style-Sheet-Using-Tutorial-CSS-Swap-Stylesheet
Learn to change the entire style of your web page with a click using JavaScript that is targeting the href attribute of your familiar link element using the setAttribute method of JavaScript. DEMO: http://www.adamkhoury.com/demo/js_swap_css_stylesheet/
Original source
Link to this post!
23 responses to “Change Style Sheet Using Javascript Tutorial CSS Swap Stylesheet”
how do i then keep the chosen style when i click to another page
How would we us php to create an if statement. Lets say I want to have my page echo "This is the dark theme" when the dark.css is enabled and when the default.css I want it to say "This is the default theme." – Of course using if / else statement(s) but not exactly sure how to check for which css page is enabled on a page.
THANKS A LOT!
WOW, you make seemingly impossible stuff to existence.
THANK YOU!!!!
I have been searching for a way to do this for, no joke, three fucking hours. Every single thing I found either didn't work, was overly complicated, or expected me to know things that I don't.
And yes, I could go through a javascript/css/jQuery/whatever tutorial. If I were making a proper web page, I might actually do that.
But I'm not. I'm taking various stories I've enjoyed on the internet, putting them into html documents, and creating an index linking to them, so that I can reread these stories even when my internet conks out. The only special thing I wanted to do was have a "light" theme" (white background, black text) and a "dark" theme (black background, white text). That's it.
Thank you for finally making a simple tutorial so that I can do this.
BTW, when I was taking a class on Java, I was told camelCase (with the first word all lowercase) was standard, so that's probably why your program does that.
I hate that fucking shit when you make text boxes automatically select the fucking whole text like I am too dump to select what I want to select
Hi Nice videos. If I refresh the page its redirecting to the default.css. I needs the css to be work even after the page refresh. Thanks.
SO SIMPLE AND EASY THANK YOUUUUUUUUUU ADAM
This was really useful 😀 Thanks!
One question though, how do I go about making a cookie to remember the CSS style last selected? If anyone else knows please answer. Pretty newby at this stuff and every other CSS change tutorial I've looked at hasn't worked :[
Adam, you save me. Thanks =_)
Would have been nice for newbies to see the final result. Like how it actually works in practice.
This was a great simple tutorial, perfect for what I needed. Like how you present yourself adding in personality without deviating from the topic. Wish I would have found this earlier instead of searching all around for what you just explained. Thank you.
I love how you don't use jquery for the most part in your videos
great tutorial, thanks
Hi Adam, I only just discovered your channel and I like it a lot. You are very clear and fluent. And your vids are good quality / clearer than most because you zomm into the action. Well Done and I look forward to watching / learning more.
Your the best teacher going……Keep It up, you have my support!
i'd really like a video tutorial on the lights down that google did for earth day (this video was great too)
Do you know how i can make the stylesheet stuck? cause when i change page, the stylesheet changes back to normal…?
good video tutorials. I am searching all your tutorials but could not find a tutorial that allow muliple entries. i am designing a sports system and need to select 11 players for example and when i press submit button it must insert data into database instead of enter it one by one
Thanks for your tutorials.
This man makes programming such fun. I wish he was my teacher. I have never found programming to be fun. It always looks boring but here it is excting. Thanks and Thanks.
I love these videos! Great tutorials. Keep em coming 🙂
Really Good tutorials. Great teaching style.
I am using Dreamweaver CS4 and do not have the camelcase problem as you. The code hint drop down on this computer shows all lowercase where your shows camel. I have tried to force it to camelcase, the help manual says you can, but I have not been able to. I have been able to go all upper or all lower but these are defaults. Dreamweaver has some buggy issues like these I have found. I have had to fresh install to fix some issues in the past.