JavaScript DOM Tutorial #13 - Styles & Classes

Показать описание

Hey gang, in this JavaScript DOM tutorial I'll show you how to apple styles and classes to elements in the DOM.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
Other tutorials:

----- JAVASCRIPT FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

============== The Net Ninja =====================

================== Social Links ==================

Рекомендации по теме

Комментарии

Dude you are seriously changing my life. I've been learning to code for nearly 5 years but nothing past bare bones concepts that you learn in school. I wasn't sure if it was for me but I recently started learning web development and I'm loving so much more than Java and C++. The combination of JS with HTML/CSS makes it really easy to visualize what I am doing and I'm starting to make my own website now for a resume project and this is helping tons! Happy New Years!

primetime

Very good tutorial! Clear, nice, and precise, but just one thing missing in this 'class' section that is 'classList.toggle'

alexhitchins

You are the best, simple and concise.
thanks from heart.

aghiadalzein

Thank you sir for these tutorials. I just started learning JavaScript and your tutorials are really helping me.

MelkaZ

Shaun, thank you for producing these tutorials.. to be honest.. your tutorials are the best out of the ones I have seen. Big thanks for doing these. Keep educating others please, I am enjoying your tutorials and will buy your JS course on Udemy. It says it includes one download I hope it is the e-book version of the course.

oilblog

Perhaps you cover it later on, but classList.toggle's worth mentioning (essentially works as an on/off switch and is quite useful). :) Appreciate the videos, Ninja! (bow)

lazalaza

I notice if you don't have any styling, you don't get a space added before 'delete'. But all the other <li> nodes automatically have a single whitespace added between bookName and delete. Why is this? Also why doesn't the automatically added single whitespace interfere with the styling of the <li> nodes?

Martin

Thank you very much! Your lessons are so useful!

alexanderl

Thanks again for the great tutorial xD
Greetings from Brazil

matheuscascao

bookName.className = 'name'

also works

sohansoharab

hello
tnx for video,
and you can add insertBefore() method for added items [0]

mohamadreza

could you have done?

li.className = "test1 test2"?

chito_

How can i keep the data i have added through the add button on the page after refreshing??

GameChanger-wvvh

bookName.className = "name";
is it ok if I assign the class of the bookName instead of ??

lojalinfinilojalinfini

Dear net ninja, I am following this series, and I am stuck because after I inject an li element the delete function doesn't work anymore. I had a similar problem at first, the querySelector() method didn't work, but it was solved using setTimeOut(), can u help please?

erbo

wow nice but this code can also lead to the final output
var a =
a.innerHTML += '<li><span class="name">'+value+'</span> <span
pleace tell me which is the best way.

haritejakoduri

how do you console log classList so that the entire class list prints to the dom?

TheKsiksa

JavaScript DOM Tutorial #13 - Styles & Classes

JavaScript DOM Tutorial #13 - Styles & Classes

JavaScript DOM Manipulation – Full Course for Beginners

Learn DOM Manipulation In 18 Minutes

JavaScript DOM Tutorial #10 - Event Bubbling

Accessing DOM - 13 || JavaScript Tutorial for Beginners - 83

Javascript Tutorial For Beginners 2017 HTML DOM 13

JavaScript DOM Tutorial #12 - Creating Elements

JavaScript DOM Tutorial #13 JavaScript all Operators and Operands [ with Source Code ]

Java Constructors Tutorial | Object Oriented Programming | Java Full Stack Course | lecture 13

JavaScript DOM Full Course | Document Object Model JavaScript Complete Course

JavaScript DOM Tutorial #11 - Interacting with Forms

JavaScript DOM Tutorial | Document Object Model in JavaScript

Curso Básico de Javascript 13.- Introducción al DOM (Document Object Model)

Javascript Dom Manipulation Methods Completely Explaied 13 - [JAVASCRIPT COURSE]

JavaScript Lesson 13 DOM Manipulation

JavaScript DOM Manipulation Mastery: A Comprehensive Guide

JavaScript Tutorial für Anfänger #22 - Das Document Object Model DOM

JavaScript DOM Tutorial #1 - Introduction

Using the elementFromPoint() method - JavaScript DOM Tutorial

JavaScript Tutorial For Beginners #32 - What is the DOM in JavaScript?

JavaScript DOM-Manipulation (With Examples) | JavaScript Tutorial

Javascript DOM Full Tutorial

JavaScript DOM Tutorial - Element.insertAdjacentHTML()

JavaScript DOM Tutorial - Element.matches()