Тёмный

JavaScript DOM CSS Styling Methods Tutorial in Hindi / Urdu 

Yahoo Baba
Подписаться 331 тыс.
Просмотров 162 тыс.
50% 1

In this tutorial you will learn how to style html elements with javascript in Hindi, Urdu.You can learn javascript css styling methods to style html tags with javascript className , classList and style methods.
JavaScript Tutorial Playlist
• 🏆 JavaScript Tutorial ...
Follow us on Facebook
/ yahooobaba
Follow us on Twitter
/ yahooobaba
#javascript #webdevelopment #webdesign

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

 

16 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 150   
@ajaygoel7889
@ajaygoel7889 5 лет назад
You are doing a tremendous job. God bless you. I dont comment regularly. But your videos forced me to comment, Simply superb
@YahooBaba
@YahooBaba 5 лет назад
Thanks Ajay for appreciating my work :)
@abduljalil4528
@abduljalil4528 5 лет назад
thanks bro...i am your regular student and following your classes...
@mr.hacker....6266
@mr.hacker....6266 2 года назад
Thanks Sir for Providing Quality Content for Students.... 👌👍👌 Free Of Cost...😊
@YahooBaba
@YahooBaba 2 года назад
Your most welcome :)
@khannasir1057
@khannasir1057 2 года назад
Best ever channel for JavaScript and Web Development tutorials.
@YahooBaba
@YahooBaba 2 года назад
Glad you like them!
@khannasir1057
@khannasir1057 2 года назад
@@YahooBaba Sir Please make a videos lecture on React JS
@mrankushtechnical
@mrankushtechnical 3 года назад
className method SE existing classes remove ho Jati hai...
@YahooBaba
@YahooBaba 3 года назад
Uske liye doosra method aata hai ClassList. www.w3schools.com/howto/howto_js_remove_class.asp
@mrankushtechnical
@mrankushtechnical 3 года назад
@@YahooBaba you have discussed this already sir , 😀 But sir className method SE to purani classes remove ho Jayegi agar usme nayi classes assign krenge to Ku ki wo as a string kaam karega..
@twi4458
@twi4458 3 года назад
@@mrankushtechnical Acha aisa hota kya?
@twi4458
@twi4458 3 года назад
@@mrankushtechnical Ha bhai aisa ho rha h✨
@mrankushtechnical
@mrankushtechnical 3 года назад
@@twi4458 yes, Ku ki wo as a variable consider hota hai.
@bruhmoviez
@bruhmoviez 3 месяца назад
thanx bro.... i was stuck in this
@mdhasiburrahmannafiz9984
@mdhasiburrahmannafiz9984 4 года назад
I just love thissss.. You are great Yahoo Baba.. You deserve millions of subscribers ❤
@YahooBaba
@YahooBaba 4 года назад
Thanks :)
@englishspeaking2.023
@englishspeaking2.023 4 месяца назад
He is an Amazing Teacher ❤❤
@AhsanBhatti98
@AhsanBhatti98 5 лет назад
Thanks bro.You just solve my problems.
@YahooBaba
@YahooBaba 5 лет назад
YourWelcome Ahsan :)
@shahwazhydernaqvi9179
@shahwazhydernaqvi9179 2 года назад
sir apka andaz bahot achcha hai Apse request hai React per Bhi video banaiye
@YahooBaba
@YahooBaba 2 года назад
Yes sure
@shahwazhydernaqvi9179
@shahwazhydernaqvi9179 2 года назад
thank you sir
@aliisrar9676
@aliisrar9676 3 года назад
great teacher thank you so much sir
@YahooBaba
@YahooBaba 3 года назад
You are welcome
@InspireUShorts58
@InspireUShorts58 Год назад
I don't know why ur channel subscriber is so less because u deserve million subscribers 😭
@YahooBaba
@YahooBaba Год назад
Thanks for appreciating my work :)
@prashantdoijode1836
@prashantdoijode1836 4 года назад
Way of teaching is Superb
@YahooBaba
@YahooBaba 4 года назад
Thanks Prashant :)
@junedshekh313
@junedshekh313 2 года назад
Again it would have been better if you have shared these html/css files so that we can practice along with you. Right now topics are much complex and unfortunately we don't have the source files to practice with.
@YahooBaba
@YahooBaba 2 года назад
Get it from our website www.yahoobaba.net
@junedshekh313
@junedshekh313 2 года назад
@@YahooBaba Thanks
@ncsgaming4093
@ncsgaming4093 2 года назад
thanks for amazing element video
@rupendrakumar128
@rupendrakumar128 4 года назад
Thanku brother ur class very helpful please carry on
@YahooBaba
@YahooBaba 4 года назад
Your welcome Rupendra :)
@SunilKumar-yd9bz
@SunilKumar-yd9bz 4 месяца назад
Thanks!
@YahooBaba
@YahooBaba 4 месяца назад
Your most welcome 🙏
@akshayzade8441
@akshayzade8441 4 года назад
Sir video is great with all this knowledge but are these stuff really important for the project? because i feel directly changing the css is simple and best option
@YahooBaba
@YahooBaba 4 года назад
Akshay If you want the website visitor change the style itself means dynamically on click something then we uses Javascript.
@akshayzade8441
@akshayzade8441 4 года назад
@@YahooBaba - Ohhhhh YES GOT IT I have seen websites which changes content dynamically ThankYou
@maxmarios1508
@maxmarios1508 4 года назад
@@akshayzade8441 hello brother i am also new in this field ..please give me your mobile number or whatsap i need your help
@sdajmathulla6893
@sdajmathulla6893 3 года назад
your reaylly osm bhai
@YahooBaba
@YahooBaba 3 года назад
Thanks :)
@MTTRex
@MTTRex 3 года назад
Sir it's mean tutorial get vallu and set valu class ...... ka jo (get.attributer,setAttribute,Attribute ) inko hum classNmae,style,classList.add,classlist.remove se hum prathithapan karsakte he!!!!!
@talhashahid9148
@talhashahid9148 Год назад
thanks sir for pro level content👌👍
@YahooBaba
@YahooBaba Год назад
Always welcome
@technology7033
@technology7033 Год назад
Outstanding sir
@priyanshubhardwaj2158
@priyanshubhardwaj2158 4 года назад
Is it necessary to provide the CSS styling in HTML file itself or else we can also target the CSS styling from the CSS files?
@Goofyahh809
@Goofyahh809 2 года назад
u can use external css it will also work :)
@monikadesai8251
@monikadesai8251 Год назад
Helpful thanks🌹
@gurejalectures
@gurejalectures 5 лет назад
Bro aik sy zayada css properties apply krny k liyea kya command ho g?
@soorajgusain7224
@soorajgusain7224 5 лет назад
Setattribute()
@prashantdoijode1836
@prashantdoijode1836 4 года назад
Please Prepare Video's for AngularJs and Advance JavaScript.
@niteshdimri6517
@niteshdimri6517 3 года назад
Sir, please make some project on javascript, it will very beneficial for us
@YahooBaba
@YahooBaba 3 года назад
Yes sure
@raidislam9010
@raidislam9010 4 года назад
just query purpose I am using (classList and className ) to add class into dom and also I am testing a string method to use this classList or className for example // var element = document.querySelector('#header').className.toUpperCase(); my #header class get Uppercase but I want to set uppercase my inner text ist possible to use className.toUpperCase , I am just asking cause when I add classList or className put a dot sign then show so many string method that's why I am just use it.
@BodoDailyUpdate
@BodoDailyUpdate 4 года назад
Helpful video
@viveknagar5032
@viveknagar5032 5 лет назад
Sir Ek Question Hai agr mujhe GetElementsByClassName se Bhot Sari Class's Select Karni ho to kaise karunga kuki mai try kar raha hu to bus ek hee ho rahi hai mujhe sab ko select karke unka innerHTML Change kar na h ek Sath kaise ho payega ye ?
@razamustafa7283
@razamustafa7283 4 года назад
sir ek help ha mia cms based responsive web banana chata hn to uskay liye kn kn si video start karu dhekna step by step.
@faizkhatri5701
@faizkhatri5701 4 года назад
Sir agar hamne ek div banaya hai jiska class humne container rakha hai. To agar hame us container ki width js se excess karni ho to kar sakte hai???? Agar ha to kaise??
@YahooBaba
@YahooBaba 4 года назад
document.getElementsByClassName("container")[0].offsetWidth;
@faizkhatri5701
@faizkhatri5701 4 года назад
Sir clintwidth and offsetwidth me kya difference hai..
@YahooBaba
@YahooBaba 4 года назад
@@faizkhatri5701 offsetwidth = width + leftborder-width + rightborder-width and clientwidth = width without border
@faizkhatri5701
@faizkhatri5701 4 года назад
@@YahooBaba thanks.. 👍
@prashantdoijode1836
@prashantdoijode1836 4 года назад
As you explained (document.querySelector("#header").className or other...properties, not working, if we add document.querySelector("#header")[0].className then it's working. )
@khbipu2977
@khbipu2977 3 года назад
best js tutorial
@VeerpalKaur-uv9dv
@VeerpalKaur-uv9dv 4 года назад
Please make a video on developer toolbar of chrome
@Aditya35654
@Aditya35654 4 года назад
Sir when you will do your face reveal 😋😋😋😋😋😋
@YahooBaba
@YahooBaba 4 года назад
Soon.
@umairahmed282
@umairahmed282 4 года назад
please tell me the plugins you are using that shows suggestions beneath on javascript..please reply
@jsscn
@jsscn 5 лет назад
Ye CSS Karne keliye kyun js Ka mdad le hum CSS men jakar bhi to koi bhi style change Kar sakte hai phir JS kyun?
@jsscn
@jsscn 5 лет назад
Reply Soon Sir
@YahooBaba
@YahooBaba 5 лет назад
JS se CSS hum kisi EVENT pe laga sakte hai jaise (Click) pe, right click pe, keypress pe etc. CSS se hum koi event nahi add karsakte hai.
@aliisrar9676
@aliisrar9676 3 года назад
ALLAH Bless You
@mayankverma3684
@mayankverma3684 Год назад
thanks65
@VeerpalKaur-uv9dv
@VeerpalKaur-uv9dv 4 года назад
Sir jaise aapka pichhli video mein chl nhi rha tha console mein...Mera bhi nhi chl rha jab console mein type karti hoo tabhi kaam karte hai ye methods...plz bta do kaise theek karna hai
@urbanreader722
@urbanreader722 3 года назад
Good video sir
@YahooBaba
@YahooBaba 3 года назад
Thanks
@GautamKumar-yv7li
@GautamKumar-yv7li 3 года назад
sir please provide the source code of this front page for practicing please
@vikasshah9251
@vikasshah9251 Год назад
Sir isme hum css ki different file ko target kr skte h Hum isme inline css target kr rhe h External css target kr sakte hai
@YahooBaba
@YahooBaba Год назад
Inline css toh aap isi videos se dekh kar kar sakte hain. External CSS ko target nahi kar sakte.
@PencilDoodle
@PencilDoodle 2 года назад
dear sir you are requst to make playlist on c# csharp🙏
@YahooBaba
@YahooBaba 2 года назад
Can't possible this year because few other courses will coming soon like Laravel, React, Flutter
@PencilDoodle
@PencilDoodle 2 года назад
@@YahooBaba ok bro
@princethakur8246
@princethakur8246 3 года назад
Hi im watching ur all videos and practicing daily but I have a problem regarding this method I used this method in java script but it does not works it shows an error of cannot read property but when I use same method in console section it works so plz help me how I solve this problem
@YahooBaba
@YahooBaba 3 года назад
Send me your code file with this comment at my email id : hello@yahoobaba.net I will check it.
@princesukhala7106
@princesukhala7106 Месяц назад
sir not able to find color.css file in the source code
@Shreyashrajput762
@Shreyashrajput762 3 года назад
Badhai ho Sir video ka 2nd birth day hai
@YahooBaba
@YahooBaba 3 года назад
Thanks :)
@wolverine_d_king9422
@wolverine_d_king9422 3 года назад
I have one doubt. Why we should use css in javascript when we can do it in simple css file only. Means what is the point of using it there
@YahooBaba
@YahooBaba 3 года назад
Hello Sagnik, Javascript is a Event based programming language. By using events you can use CSS on HTML elements like onclick, ondblclick, onresize, onscroll etc. but you can't do this event based css in CSS only.
@gurejalectures
@gurejalectures 5 лет назад
document .getElementById("demo") .style .cssText = "margin-left:100px;background-color:red"; document .getElementById("demo") .setAttribute("style","margin-left:100px; background-color:red"); Ye theak ha
@YahooBaba
@YahooBaba 5 лет назад
Yes both commands are correct.
@shinerise5736
@shinerise5736 2 года назад
i am trying to get style to print on console its keep showing the error Uncaught TypeError: Cannot read properties of null (reading 'style') i am using the same code as you doing. but in visual studio its not even showing the style property in options. var element; element = document.querySelector("#header").style.backgroudColor; console.log(element);
@lyrichives7859
@lyrichives7859 Год назад
BackgroundColor = "red";
@liveMyth1
@liveMyth1 9 месяцев назад
Yahoo Baba 296K subscribers
@abidislamictutor
@abidislamictutor 3 года назад
sir ye jo ap ne layout wala document bnaya hai plz is k liye bhi video bna den ya is ka code de den to hmary liye bht asani ho jaye g plzzz
@YahooBaba
@YahooBaba 3 года назад
Layout ka code idhar samjhaya hua hai : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2a5fSQxG5b4.html
@abidislamictutor
@abidislamictutor 3 года назад
@@YahooBaba ok mn ne aj hi ap ka reply prhne se pehle hi wo video dekh ke bna liya hai 😅😅
@tavneetsinghkhurana8432
@tavneetsinghkhurana8432 4 года назад
sir isme css file ko head mai lagana hai yaa phir script tag ke andar
@YahooBaba
@YahooBaba 4 года назад
Head tag ke andar
@sunainasaini3722
@sunainasaini3722 3 года назад
Sir uncaught typeerror aa rha hai check kr ke bta skte ho Kya problem hai plz sir Code = var style; document.querySelectorAll(".sty").style.backgroundColor="black"; Console.log(style); Plzz sir check kr ke bta do Kya glti hai ??
@YahooBaba
@YahooBaba 3 года назад
3 line lihki hai aur teeno lines mein galti hai.Send me your complete code file of html, javascript at my email id : hello@yahoobaba.net
@sunainasaini3722
@sunainasaini3722 3 года назад
@@YahooBaba sir Maine aapko email krdi file plzzz check kr ke bta do
@ThisAmit
@ThisAmit 3 года назад
Sir please reply, why it is not targeting the external css file?
@YahooBaba
@YahooBaba 3 года назад
Do you want to modify anything in external css file with javascript ? If yes then it can't possible with JS to modify any file except JSON or XML files.
@rfcreations7450
@rfcreations7450 2 года назад
But i used external CSS Stylesheet and its not targeting the required selectors
@YahooBaba
@YahooBaba 2 года назад
For that you have to use (addClass) method of JS. Next video
@princesukhala7106
@princesukhala7106 Месяц назад
06:00 min
@zafarhussain8273
@zafarhussain8273 4 года назад
sir how to change the value from css file . becz in real project we dont use inline css.
@YahooBaba
@YahooBaba 4 года назад
No we can't change the value of CSS file with Javascript. We uses Javascript to change CSS value only for temporary bases not permanent.
@zafarhussain8273
@zafarhussain8273 4 года назад
@@YahooBaba ok you mean we can only change it on browser not in css file . thnks sir
@Fantasycricketsport
@Fantasycricketsport 4 года назад
Bro Jaise hum innsab main class Ka name KHI CSS change kr rhe h inka koi itna use h bhi website banane main kyuki class name toh CSS pe Jake bhi kr skte h or koi kyu ek new folder banayega js Ka or code likh ke change krega or bs inka role bta do Jo yh change kr rhe or or Flipkart or movies site main inka koi role hoga please rply krna purane message Ka bhi nhi Kiya apne or koi bhi reply kr skta h iss Message ka
@YahooBaba
@YahooBaba 4 года назад
Dear mujhe lagta hai aapko JS ka asli use samajh nahi aaya hai. Dekho JS jo hai wo ek EVENT based programming hai. Aap CSS ki file se koi event pe css nahi laga sakte jaise onclick, ondoubleclick, onscroll, onresize etc. Aapko agar kisi EVENT pe CSS lagani hai tabhi aap Javascript ka use karenge. Flipkart ka aap jo name le rahe ho uspar toh har page mein iska use ho rha hai. Uske home page pe jo Carousel laga hua hai wo iska sabse bada example hai, uska dropdown mega menu bhi isi se bana hai aur bhi bhut se example hai.
@Fantasycricketsport
@Fantasycricketsport 4 года назад
@@YahooBaba k bro aab smjh Aya
@debashischand287
@debashischand287 4 года назад
className ka add remove() nehi hota he classList ke jese ?
@aliisrar9676
@aliisrar9676 3 года назад
no
@MrTecnical-s9i
@MrTecnical-s9i Месяц назад
Bro not work in vs code 😔
@istiakahammad7074
@istiakahammad7074 4 года назад
var style; style = document.querySelector(".home_main").style.border; console.log(style) sir moje show kar rahe hai. html= . css = .home_main{ height: 600px; background-color: #5d6d7e ; border: 2px solid red; /* background-attachment: fixed; */ }
@YahooBaba
@YahooBaba 4 года назад
Yeh bilkul sahi deekha raha hai. Ab aap bataye ki aap kya karna chahte ho ?
@istiakahammad7074
@istiakahammad7074 4 года назад
@@YahooBaba sir mai nehi samja.
@istiakahammad7074
@istiakahammad7074 4 года назад
@@YahooBaba Sir.,If you make some practical project, than our all problem will have solved.
@YahooBaba
@YahooBaba 4 года назад
Maine toh kuch samjhaya he nahi. Main toh yeh puch rha hun ki aap kya karna chahte ho ? means kya output chahte ho ?
@istiakahammad7074
@istiakahammad7074 4 года назад
@@YahooBaba sir mai ab es problem ko solve kar diya.Thanks
@atishayjain2205
@atishayjain2205 4 года назад
Sir app bhot acha padhate ho but honestly speaking this language is a total MESS, it has some unnecessary rules to memorize. Like background color ke beech "-" hogya ya esse kai rules jo har waqt yad rkhna bhot mushkil hota hai
@mm-xb8oi
@mm-xb8oi 4 года назад
Sir ,javascript css dom mere computer me run nhi ho raha hai kya Karu
@YahooBaba
@YahooBaba 4 года назад
Javascript ka aapke computer se kuch lena dena nahi hai. Aapke code mein he kuch problem hogi. Aap apna code file mere email id pe bhej dejiye : hello@yahooobaba.net
@mm-xb8oi
@mm-xb8oi 4 года назад
@@YahooBaba Sir mere system me problem thi,Maine same code alag System me ki to code chal gaya,thank you sir for a wonderful tutorial,please make a tutorial on react js
@championclub3698
@championclub3698 3 года назад
Sir why are you not providing source code any specific reason ?
@YahooBaba
@YahooBaba 3 года назад
Dear all source code is available on our website : yahoobaba.net
@whatstime566
@whatstime566 4 года назад
sir dom bht tough hai. why??? koi source btaeyee plzzzz
@YahooBaba
@YahooBaba 4 года назад
Nahi dost yeh toh bhut easy hai
@whatstime566
@whatstime566 4 года назад
@@YahooBaba thanks sir ,
@shubhamverma865
@shubhamverma865 3 года назад
Sir can u send me this ppt plz 🙏
@Babligupta162
@Babligupta162 Год назад
Consol error are showing all time
@YahooBaba
@YahooBaba Год назад
show me your code.
@yadgarelectronics8232
@yadgarelectronics8232 3 года назад
voice not match with code 1 mint video delay
@englishspeaking2.023
@englishspeaking2.023 4 месяца назад
Bhai padhai Raha ya comparison 😂😂
@gamingwithajk7253
@gamingwithajk7253 Год назад
how can i change both the para to " akif" ? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum eligendi id aliquam Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum eligendi id aliquam let a; a = document.querySelectorAll("#head .para").innerText = "akif" when i put this .. a = document.querySelectorAll("#head .para")[0].innerText = "akif"//it changes the first para to akif but not second. i want to change both the para to akif using this..need help