HomeОбразованиеRelated VideosMore From: The Net Ninja

JavaScript Tutorial For Beginners #36 - Changing CSS Styles

503 ratings | 29267 views
Hey ninjas, in this JavaScript tutorial, we'll be looking again at the setAttribute method to control in-line styling of our HTML elements, as well as utilizing the 'style' property that all DOM objects have access to. If you have any questions at all, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Html code for embedding videos on your blog
Text Comments (24)
Mark Balazo (4 months ago)
Couldn't thank you enough Sir!
Aaron Harris (6 months ago)
You have made me feel so much more confident man about JavaScript, I'm pretty good at Html/Css(steady improving), have always been really afraid I couldn't understand the logic of JavaScript, thank you so much man!
kaushik prasad (10 months ago)
great 👌
nuno sofyen (1 year ago)
2:20 can we do like this : link.setAttribute ("style" , link.style + " left : 10px ; " ) ; so we don't have to write the old style ?
Maggie Wang (1 year ago)
thank you this is a very helpful video
Marcin Sz. (1 year ago)
4:06 pro-tip: you can use up/down arrows in console to reuse recently commands. Hope this help somebody :)
Kamran Bhatti (1 year ago)
how to give hover style in js also how to fix parentelement undefined problem
Łukasz ;p (1 year ago)
You are awesome. At last, I understand JS. Quickly and simply, this is that what i needed
Thomas Gourley (1 year ago)
Net Ninja just makes these videos as an excuse to teach us and do some development of his website at the same time XD
The Net Ninja (1 year ago)
You got me :)
Ayan Banerjee (1 year ago)
For adding classes instead of replacing them, we can use title.className += " " + "your_class_name_here" The space preceding is important because js concatinates it with the previous class
Ayan Banerjee (1 year ago)
W3Academy No problem. There's also something called classlist, does the same thing.
W3Academy (1 year ago)
thank you for your kind knowledge share! that was really helpful :)
UTprema (1 year ago)
Thanks for the clear short tutorials. What would be a practical use for this? Apart from changing elements in the console window?
Pierre (1 year ago)
Best net ninja teacher ever. JS so simple thanks to u. THANK YOU
E Jeffery (2 years ago)
I had been beating my head up against a rock trying to comprehend the basics of JS and your channel helps tremendously. Thank you! And lovely accent.
Marinakulichok (2 years ago)
super tutorials-- THANK YOU
The Net Ninja (2 years ago)
Thanks :)
Eric Hofer (2 years ago)
When viewing the "text" list for style, the property is referenced as "background-color," but when setting the attribute it's camel cased without a hyphen (which is logical as attribute names cannot have hyphens as these would be minus signs). Is inconsistency here to keep the riff-raff out?
Shannon Myers (2 years ago)
For the first example, would it be the same to put "title.style.position = 'relative';" ?
Shannon Myers (2 years ago)
Let me actually finish the video before asking questions next time.
Wot (2 years ago)
Thanks for this! Quick question though - if your CSS is stored in a linked .css file, will this update it there or just enter the new styles in the HTML?
Brian Toon (1 year ago)
There might be a way to do this but the document in document.whatever refers to the HTML document if I remember correctly from earlier in this tutorial. Say you wanted a button on your web page to turn green when it was "on" and turn red when it was "off" When the button is turned "on" and "off" your functions could look like this: function buttonOn(){ var myButton = document.getElementById("idOfButton"); myButton.setAttribute("class", "button-on"); } function buttonOff(){ var myButton = document.getElementById("idOfButton"); myButton.setAttribute("class", "button-off"); } in your linked .css file: .button-on { color: green;} .button-off { color: red;}
Upasana Tandon (1 year ago)
+Wot Did you find an answer to your question? If you did, please update here. I also have the same question. Thanks!

Would you like to comment?

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