Change Page Body Class Depending on Partial | Web Development Tutorial

In real web development, things can depend on each other. You can take indirect or direct element reference and use that to manipulate DOM depending on what has been loaded in DOM. For example if certain part of DOM contains a class, you can add or remove another class to page body depending on it. It will allow you to target whole page differently in CSS, if it has got that special class. I will show you this via jQuery and via Vanilla JavaScript.

Let's say our page content has a partial that was loaded externally. It brought 'intro-area' class with it. Now our body has already got a class named as 'homepage'. So if our content has got 'intro-area' class, we can add another class to body. Then we can style our page based of that newly added class in body. Whole page - not just the content area. Otherwise our content unique class was sufficient.

So if homepage class has got 'page-intro' class, we are changing background color and text color in CSS. First we will do it in jQuery and then with Vanilla JavaScript.

When DOM is ready, if our container has got class named as 'intro-area' we will add 'page-intro' class to body tag, in other case we will remove that class from body tag.

In plain JavaScript We will attach an event listener on document to observe when DOM is loaded. When its loaded, we will fire a function. That function will contain the logic.

By using this technique, you can change page styling if different content is loaded in page. This technique is also useful to change body class on different partial load.

✅ How To Hide / Protect JavaScript Code - Techniques and Tools
https://youtu.be/8VyzRlxo2-k
✅ React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast
https://youtu.be/0IvxCxcEBPo
✅ Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method
https://youtu.be/Xw7G2b80dDg
✅ Get URL Parameters in JavaScript | URLSearchParams
https://youtu.be/CZP1iQFQjEY
✅ DIV to PDF, Iframe to PDF using JavaScript Only (with CSS & Images Support)
https://youtu.be/DV2tAG5E-F0
✅ How To UnMinify JavaScript Minified Files Easily | Decrypt Complex JavaScript Code
https://youtu.be/uh8_Rt4Qam8
✅ Toggle Class in Vanilla JavaScript | Learn JavaScript
https://youtu.be/IdtwowBlfmI
✅ How to Execute a JavaScript File by using NPM
https://youtu.be/2xcoenAdSWs
✅ Get User's Location (Country, State, City) with Free Unlimited API Access | PHP & JavaScript
https://youtu.be/_P8_JUaoNgs
✅ Replace jQuery with Vanilla JavaScript Code Easily | jQuery vs JavaScript
https://youtu.be/toJ3vRUMf2g
✅ Toggle in Vanilla JavaScript
https://youtu.be/ebDCyf-JFOw
✅ MINIFY JAVASCRIPT FILES & FOLDERS in Multiple Ways (Command Line & Code Editor)
https://youtu.be/umVoV4ak0HA
✅ JavaScript vs jQuery | Difference between JavaScript and jQuery
https://youtu.be/PrBSuz7rPlc
✅ JavaScript Variable Redeclare & Reassign | VAR vs LET vs CONST | Practical Examples
https://youtu.be/9NNva3x0awQ

✅ Hide CSS Code
https://youtu.be/ODEXGaly0QE
✅ Smooth Scroll with CSS Only
https://youtu.be/SzGjRw-zTgY
✅ Lazy Load with Only CSS
https://youtu.be/L7alWGjPsRM
✅ CSS Only Custom Radio Buttons and Checkboxes
https://youtu.be/yhY22IYf3Es
✅ Extend Content Beyond Container | Full Width Content in Container | Break Out of Container
https://youtu.be/w2dzJ1k3eFI
✅ Break Out of Container for Half Screen Width | CSS Tutorial
https://youtu.be/9r9R4DcQe8E
✅ CSS Only Toggle Divs
https://youtu.be/AbSXYDusKjc
✅ CSS Only Accordion
https://youtu.be/Z92TgB45nCE
✅ ONE LINE CSS Code for Smooth Transition Effects in Whole Site | Easy & Smooth Transitions
https://youtu.be/7wPEV4Ww4_U
✅ CSS Only Two Liner Toggle
https://youtu.be/rrusz7gZClU
✅ More CSS Tutorials:
https://youtube.com/playlist?list=PL1w28LzkbaQEADM7Q-tzY6dBo4tQ10lcq

Thank You!
? LIKE VIDEO
? SUBSCRIBE
? PRESS BELL ICON
✍️ COMMENT

Channel: https://www.youtube.com/webstylepress
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress/
Twitter: https://twitter.com/webstylepress
Instagram: https://www.instagram.com/webstylepress
LinkedIn: https://www.linkedin.com/company/webstylepress
GitHub: https://github.com/webstylepress
#webstylepress #tutorials #webdevelopment #js #javascript #jquery