JavaScript DOM CSS Styling Methods Tutorial in Hindi / Urdu
Вставка
- Опубліковано 15 жов 2024
- 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
You are doing a tremendous job. God bless you. I dont comment regularly. But your videos forced me to comment, Simply superb
Thanks Ajay for appreciating my work :)
Best ever channel for JavaScript and Web Development tutorials.
Glad you like them!
@@YahooBaba Sir Please make a videos lecture on React JS
thanks bro...i am your regular student and following your classes...
Thanks Sir for Providing Quality Content for Students.... 👌👍👌
Free Of Cost...😊
Your most welcome :)
className method SE existing classes remove ho Jati hai...
Uske liye doosra method aata hai ClassList.
www.w3schools.com/howto/howto_js_remove_class.asp
@@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..
@@mrankushtechnical Acha aisa hota kya?
@@mrankushtechnical Ha bhai aisa ho rha h✨
@@twi4458 yes, Ku ki wo as a variable consider hota hai.
He is an Amazing Teacher ❤❤
Bro aik sy zayada css properties apply krny k liyea kya command ho g?
Setattribute()
sir apka andaz bahot achcha hai
Apse request hai React per Bhi video banaiye
Yes sure
thank you sir
Way of teaching is Superb
Thanks Prashant :)
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!!!!!
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
Akshay If you want the website visitor change the style itself means dynamically on click something then we uses Javascript.
@@YahooBaba - Ohhhhh YES GOT IT
I have seen websites which changes content dynamically
ThankYou
@@akshayzade8441 hello brother i am also new in this field ..please give me your mobile number or whatsap i need your help
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?
u can use external css it will also work :)
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 ?
I just love thissss..
You are great Yahoo Baba..
You deserve millions of subscribers ❤
Thanks :)
Thanks bro.You just solve my problems.
YourWelcome Ahsan :)
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.
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
Inline css toh aap isi videos se dekh kar kar sakte hain.
External CSS ko target nahi kar sakte.
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
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??
document.getElementsByClassName("container")[0].offsetWidth;
Sir clintwidth and offsetwidth me kya difference hai..
@@faizkhatri5701 offsetwidth = width + leftborder-width + rightborder-width and clientwidth = width without border
@@YahooBaba thanks.. 👍
I don't know why ur channel subscriber is so less because u deserve million subscribers 😭
Thanks for appreciating my work :)
thanx bro.... i was stuck in this
thanks for amazing element video
please tell me the plugins you are using that shows suggestions beneath on javascript..please reply
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.
Get it from our website www.yahoobaba.net
@@YahooBaba Thanks
great teacher thank you so much sir
You are welcome
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
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.
Thanku brother ur class very helpful please carry on
Your welcome Rupendra :)
Sir, please make some project on javascript, it will very beneficial for us
Yes sure
thanks sir for pro level content👌👍
Always welcome
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
Send me your code file with this comment at my email id : hello@yahoobaba.net
I will check it.
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
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.
sir isme css file ko head mai lagana hai yaa phir script tag ke andar
Head tag ke andar
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 ??
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
@@YahooBaba sir Maine aapko email krdi file plzzz check kr ke bta do
Outstanding sir
dear sir you are requst to make playlist on c# csharp🙏
Can't possible this year because few other courses will coming soon like Laravel, React, Flutter
@@YahooBaba ok bro
Please Prepare Video's for AngularJs and Advance JavaScript.
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);
BackgroundColor = "red";
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
Layout ka code idhar samjhaya hua hai : ua-cam.com/video/2a5fSQxG5b4/v-deo.html
@@YahooBaba ok mn ne aj hi ap ka reply prhne se pehle hi wo video dekh ke bna liya hai 😅😅
your reaylly osm bhai
Thanks :)
Helpful thanks🌹
Sir please reply, why it is not targeting the external css file?
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.
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?
Reply Soon Sir
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.
As you explained (document.querySelector("#header").className or other...properties, not working, if we add document.querySelector("#header")[0].className then it's working.
)
Thanks!
Your most welcome 🙏
Good video sir
Thanks
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
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.
@@YahooBaba k bro aab smjh Aya
Helpful video
Please make a video on developer toolbar of chrome
best js tutorial
sir how to change the value from css file . becz in real project we dont use inline css.
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.
@@YahooBaba ok you mean we can only change it on browser not in css file . thnks sir
Sir when you will do your face reveal 😋😋😋😋😋😋
Soon.
But i used external CSS Stylesheet and its not targeting the required selectors
For that you have to use (addClass) method of JS. Next video
sir not able to find color.css file in the source code
Badhai ho Sir video ka 2nd birth day hai
Thanks :)
className ka add remove() nehi hota he classList ke jese
?
no
ALLAH Bless You
Sir ,javascript css dom mere computer me run nhi ho raha hai kya Karu
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
@@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
sir please provide the source code of this front page for practicing please
sir dom bht tough hai. why??? koi source btaeyee plzzzz
Nahi dost yeh toh bhut easy hai
@@YahooBaba thanks sir ,
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; */
}
Yeh bilkul sahi deekha raha hai. Ab aap bataye ki aap kya karna chahte ho ?
@@YahooBaba sir mai nehi samja.
@@YahooBaba Sir.,If you make some practical project, than our all problem will have solved.
Maine toh kuch samjhaya he nahi. Main toh yeh puch rha hun ki aap kya karna chahte ho ? means kya output chahte ho ?
@@YahooBaba sir mai ab es problem ko solve kar diya.Thanks
Yahoo Baba
296K subscribers
Sir why are you not providing source code any specific reason ?
Dear all source code is available on our website : yahoobaba.net
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
Yes both commands are correct.
thanks65
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
Bro not work in vs code 😔
06:00 min
Consol error are showing all time
show me your code.
Sir can u send me this ppt plz 🙏
voice not match with code 1 mint video delay
Bhai padhai Raha ya comparison 😂😂