HomeОбразованиеRelated VideosMore From: Adam Khoury

Change Style Sheet Using Javascript Tutorial CSS Swap Stylesheet

283 ratings | 43784 views
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/
Html code for embedding videos on your blog
Text Comments (40)
How SoEver (1 month ago)
Changes to the desired file for a short while but then jumps back immediately ...Also, my job is to save the change to a reload. I can not do that either :c (I'm new in Java Script for 2 days...so please be nice..)
alexander rahirant (9 months ago)
i need this but with just one button and btw the button must be a link tag. any help?
Mary Grooteman (9 months ago)
Oh thanks! So little code, and it works nice and simple!
Right Wing Eagle (9 months ago)
Any tutorial befkre 2016 is not ideal m8.
Valentix Milani (10 months ago)
Funzionaaaaaaaaaaaa!!!!!!!!!!!!
Mohamed Osama (11 months ago)
Thanks man you are the best
Diego Marcelino (1 year ago)
Nice
Dhakshithraam S (1 year ago)
Can I Do This For Script Tags ???
mohammad hasan (1 year ago)
Hey Adam! When i refresh the page style becomes default, how to retain the selected style?
Jordicutie iz tha best (2 years ago)
how do i then keep the chosen style when i click to another page
Leroy van de Pol (11 months ago)
I still dont have an answer to your question. Do you have one for me?
hexist77yt (1 year ago)
Make test-dark.css and test-light.css and load your script. Then you will see wich one was loaded. Make then some tweaks to your code, and finally wanted stylesheet will display properly. Done :D
hexist77yt (1 year ago)
If you have copied same head section including this script, for all pages it should run. But better use Kyle Secret solution.
Nada Sai (1 year ago)
+Kyle Secret Do you think you can provide an example for a newbie? would be really appreciated :)
Not Untrue (1 year ago)
make a variable and check which css file is being used then just run that function with that variable as the second parameter
lowheartrate (3 years ago)
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.
Rina Carmona (3 years ago)
THANKS A LOT!
Saifuddin Makati (3 years ago)
WOW, you make seemingly impossible stuff to existence.
KoyasuNoBara (4 years ago)
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.
bxyify (4 years ago)
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
V Lakshman (4 years ago)
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.
Afghanoo (4 years ago)
SO SIMPLE AND EASY THANK YOUUUUUUUUUU ADAM
Nintendan (4 years ago)
This was really useful :D 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 :[
Gerardo Herrera (5 years ago)
Adam, you save me. Thanks =_)
Al Geddis (5 years ago)
Would have been nice for newbies to see the final result. Like how it actually works in practice.
Stephen Fuller (6 years ago)
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.
LA King (6 years ago)
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.
cityshots (6 years ago)
Your the best teacher going......Keep It up, you have my support!
Simon L (6 years ago)
i'd really like a video tutorial on the lights down that google did for earth day (this video was great too)
DeadHumorLaz (6 years ago)
Do you know how i can make the stylesheet stuck? cause when i change page, the stylesheet changes back to normal...?
MrShiebas (6 years ago)
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
rhrh0903 (6 years ago)
Thanks for your tutorials.
k odu (6 years ago)
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.
Stephen Vanderwarker (6 years ago)
I love these videos! Great tutorials. Keep em coming :)
Gilbert Bigelow (6 years ago)
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.
cityshots (6 years ago)
your presentation style is excellent! thanks so much!
beinyourguard (6 years ago)
AWESOME
nishantve1 (6 years ago)
Sweet!
Robo Alf (6 years ago)
Quickand

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.