在现代网页开发中，根据用户访问的URL路径动态调整页面内容或视觉风格是一种常见的需求。例如，根据URL中包含的关键词（如“men”或“women”）来显示不同的产品图片或背景。本文将深入探讨实现这一功能的多种策略，并提供实用的代码示例。
1. 理解URL解析：window.location.pathname的优势
在进行URL匹配时，选择正确的URL部分至关重要。window.location对象提供了多种属性来访问当前页面的URL信息：
- window.location.href: 获取完整的URL字符串，包括协议、域名、路径、查询参数和哈希。
- window.location.pathname: 仅获取URL的路径部分，不包含域名、协议、查询参数或哈希。
对于根据URL路径进行条件判断的场景，window.location.pathname通常是更简洁、更可靠的选择，因为它排除了可能干扰匹配的查询参数或哈希值。
示例：
立即学习“Java免费学习笔记（深入）”；
// 获取当前URL的完整路径 (可能包含查询参数等)
var fullURL = decodeURIComponent(window.location.href);
console.log("完整URL:", fullURL); // 例如: https://example.com/category/men?id=123
// 获取当前URL的路径部分 (更适合路径匹配)
var pathName = window.location.pathname;
console.log("路径部分:", pathName); // 例如: /category/men在大多数情况下，我们只需要关注pathName来判断页面类别。
2. 动态修改背景图片：针对div元素
当需要根据URL路径改变一个div元素的背景图片时，有几种方法可以实现。
2.1 方法A: 使用JavaScript/jQuery直接设置background样式
这是最直观的方法，通过JavaScript直接修改元素的style.background属性或使用jQuery的.css()方法。
示例代码：
动态背景图片
