Get Page Name from URL & Add it as Unique Class in Body Tag | Learn JavaScript

Use unique identifier classes for each page in body tag or main div for each componentfor a website. It will help you and other developers in teams. For static website you can apply classes manually. WordPress adds classes in body tag for each page, by default. You can also apply classes via JavaScript on page load. When page loads, get page URL, extract page name from URL and add it in body classes. Make sure you don't remove classes in body tag that are already there.

HTML CSS example is from previous tutorial. I have two pages in it. Each page has got body class named as 'page'. custom.js file is linked with the page. in that we have got DOMContentLoaded eventlistener. When DOM gets ready, it will fire a function named as 'result'.

'Result' function will have our code logic. We can get page URL in JavaScript in many ways. Then we can use JavaScript methods like pop or shift to remove unnecessary parts from URL. We will just extract page name from URL and add it as a class name in body tag. Different pages will have different unique class according to page name.

✅ Always Use Page / Component Level Unique Classes | Learn Web Development
Why Use Page Level or Component Level...
✅ How To Hide / Protect JavaScript Code - Techniques and Tools
How To Hide / Protect JavaScript Code...
✅ React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast
React JS UNDEFINED Solution | Reactjs...
✅ Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method
Calculate Sum or Total from Values in...
✅ Get URL Parameters in JavaScript | URLSearchParams
Get URL Parameters in JavaScript | UR...
✅ DIV to PDF, Iframe to PDF using JavaScript Only (with CSS & Images Support)
DIV to PDF, Iframe to PDF using JavaS...
✅ How To UnMinify JavaScript Minified Files Easily | Decrypt Complex JavaScript Code
How To UnMinify JavaScript Minified F...
✅ Toggle Class in Vanilla JavaScript | Learn JavaScript
Toggle Class in Vanilla JavaScript | ...
✅ How to Execute a JavaScript File by using NPM
How to Execute a JavaScript File by u...
✅ Get User's Location (Country, State, City) with Free Unlimited API Access | PHP & JavaScript
Get User's Location (Country, State, ...
✅ Replace jQuery with Vanilla JavaScript Code Easily | jQuery vs JavaScript
Replace jQuery with Vanilla JavaScrip...
✅ Toggle in Vanilla JavaScript
Toggle in Vanilla JavaScript | Pure J...
✅ MINIFY JAVASCRIPT FILES & FOLDERS in Multiple Ways (Command Line & Code Editor)
MINIFY JAVASCRIPT FILES & FOLDERS in ...
✅ JavaScript vs jQuery | Difference between JavaScript and jQuery
JavaScript vs jQuery | Difference bet...
✅ JavaScript Variable Redeclare & Reassign | VAR vs LET vs CONST | Practical Examples
VAR vs LET vs CONST | JavaScript Vari...

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

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

• #education
• #javascript
• #js
• #learn_javascript
• #learn_js
• #basic_javascript
• #algorithm
• #js_code
• #javascript_for_beginners
• #javascript_examples
• #algorithm_examples
• #javascript_tutorial
• #vanilla_javascript
• #web_development_tutorial
• #add_class
• #dom_manipulation_in_javascript
• #page_name_css_class
• #webstylepress
• #get_page_name_from_url
• #add_page_name_unique_class_in_body_tag
• #add_slug_as_class_name_in_body_tag