JavaScript Tutorial For Beginners #36 - Changing CSS Styles

Подписаться 1,6 млн

Просмотров 94 тыс.

50% 1

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 - / @netninja
========== JavaScript for Beginners Playlist ==========
• JavaScript Tutorials f...
========== CSS for Beginners Playlist ==========
• CSS Tutorials For Begi...
========== HTML for Beginners Playlist ==========
• HTML Tutorials For Beg...
========== The Net Ninja ============
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
========== Social Links ==========
Twitter - @TheNetNinja - / thenetninjauk

Опубликовано:

15 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 40

@doobiesoda3873 7 лет назад

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.

@aaronharris1153 6 лет назад

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!

@noboringdays 3 года назад

you're done with java script?

@UTprema 7 лет назад

Thanks for the clear short tutorials. What would be a practical use for this? Apart from changing elements in the console window?

@Lbmaniak 7 лет назад

You are awesome. At last, I understand JS. Quickly and simply, this is that what i needed

@tymothylim6550 3 года назад

Thank you very much for this video! It was really clear and helpful! Great to see how it shows how Javascript converts the properties with "-" (e.g. background-color) to camel case. Didn't know that till now! :)

@arskeliss6931 2 года назад

Hi NetNinja! I have a question, can I change CSS style changing it with textContent instead of .style property? Like add for example: backgroundColor = "limegreen"; using textContent instead of style = "background-color: limegreen"?

@barenyakumar9282 3 года назад

sir, setAttribute cannot be used for a class? if no what is to be used to change the styles. As I am getting a constant error as class.setAttribute(my defined function) is not a function... you have only told about ids

@pitouchki 7 лет назад

Best net ninja teacher ever. JS so simple thanks to u. THANK YOU

@pankierownik7987 7 лет назад

4:06 pro-tip: you can use up/down arrows in console to reuse recently commands. Hope this help somebody :)

@dopeengineer5705 4 года назад

thanks

@Saudavelpro 5 лет назад

how to dynamically change css file using javascript ?????

@eahofer 8 лет назад

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?

@vincecaruso6465 4 года назад

just a small comment (as I don't think it can be fixed), but the last several video when you're typing it can't be seen because it below the bottom of the screen. Still thumbs way up (because it doesn't let me click it 2x) for great explanations.

@ahmedelmawrdy4381 4 года назад

thanks a lot , just i have question , could you recommend me a book for a js

@Syncs_DNB 8 лет назад

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?

@upasanamnnit 7 лет назад

+Wot Did you find an answer to your question? If you did, please update here. I also have the same question. Thanks!

@briantoon4128 7 лет назад

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;}

@ayaan3429 3 года назад

Am getting uncaught typeerror cannot set property display of undefined when I use : todo.style.display='flex'; I used querySelector to get the div and stored it in const todo. Where am I going wrong??? Please help me please... I've been stuck on this for the past 10 days.. am going crazy.