Скачать или смотреть 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
   • How To Hide / Protect JavaScript Code | Ja...  
✅ React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast
   • How to Prevent TypeError Cannot Read Prope...  
✅ Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method
   • How to Find Sum of An Array of Numbers in ...  
✅ Get URL Parameters in JavaScript | URLSearchParams
   • Get URL Parameters in JavaScript | URLSear...  
✅ DIV to PDF, Iframe to PDF using JavaScript Only (with CSS & Images Support)
   • DIV to PDF, Iframe to PDF using JavaScript...  
✅ How To UnMinify JavaScript Minified Files Easily | Decrypt Complex JavaScript Code
   • How To UnMinify JavaScript Minified Files ...  
✅ Toggle Class in Vanilla JavaScript | Learn JavaScript
   • Toggle Class in Vanilla JavaScript  
✅ How to Execute a JavaScript File by using NPM
   • How to Run a JavaScript File using NPM  
✅ Get User's Location (Country, State, City) with Free Unlimited API Access | PHP & JavaScript
   • Get User Location (Country, State, City) w...  
✅ Replace jQuery with Vanilla JavaScript Code Easily | jQuery vs JavaScript
   • Replace jQuery with Vanilla JavaScript Cod...  
✅ Toggle in Vanilla JavaScript
   • Toggle in Vanilla JavaScript | Pure JavaSc...  
✅ MINIFY JAVASCRIPT FILES & FOLDERS in Multiple Ways (Command Line & Code Editor)
   • MINIFY JAVASCRIPT FILES & FOLDERS in Multi...  
✅ JavaScript vs jQuery | Difference between JavaScript and jQuery
   • JavaScript vs jQuery | Difference between ...  
✅ JavaScript Variable Redeclare & Reassign | VAR vs LET vs CONST | Practical Examples
   • VAR vs LET vs CONST | JavaScript Variable ...  

✅ Hide CSS Code
   • Hide & Protect CSS Code  
✅ Smooth Scroll with CSS Only
   • Smooth Scroll to DIV on Different Page usi...  
✅ Lazy Load with Only CSS
   • Lazy Load HTML Elements (Pure CSS) | Lazy ...  
✅ CSS Only Custom Radio Buttons and Checkboxes
   • CSS Only Radio Button, Checkbox & Form Sty...  
✅ Extend Content Beyond Container | Full Width Content in Container | Break Out of Container
   • Extend Content Beyond Container | Full Wid...  
✅ Break Out of Container for Half Screen Width | CSS Tutorial
   • Break Out of Container for Half Screen Wid...  
✅ CSS Only Toggle Divs
   • CSS Only Toggle Divs | Pure CSS Toggle Sho...  
✅ CSS Only Accordion
   • CSS Only Accordion Tutorial | Pure CSS Acc...  
✅ ONE LINE CSS Code for Smooth Transition Effects in Whole Site | Easy & Smooth Transitions
   • ONE LINE CSS Code for Smooth Transition Ef...  
✅ CSS Only Two Liner Toggle
   • CSS Only Two Liner Toggle Show Hide | Togg...  
✅ More CSS Tutorials:
   • CSS  

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook:   / webstylepress  
Twitter:   / webstylepress  
Instagram:   / webstylepress  
LinkedIn:   / webstylepress  
GitHub: https://github.com/webstylepress
#webstylepress #tutorials #webdevelopment #js #javascript #jquery