仅在使用特定哈希/锚点调用页面时分配/激活 CSS 类

Posted 2023-03-29

【中文标题】仅在使用特定哈希/锚点调用页面时分配/激活 CSS 类

【英文标题】：Assign/activate CSS class only when page is called with specfic hash/anchor

【发布时间】：2020-12-14 13:56:41

【问题描述】：

网页的某些区域会因新的或更改的 CSS 类而焕然一新。但在重新设计的页面公开之前，我想在使用特定锚打开页面时提供新设计的内部预览，例如“http:.../public-web-site/real-webpage.html#内部预览”。

因此，当 URI 具有此锚点时，简短的 javascript 应该“激活”CSS 类和样式。 因此：JavaScript (jQuery) 是否有可能做到这一点：仅在使用此特定锚点调用页面时才激活 CSS 类？

【问题讨论】：

您可以做的是将这些类的 css 放在一个单独的 css 文件中，然后检查 window.location.hash == "#internal-preview"，如果是这样，请使用包含所有这些类的 css 的样式表创建一个新的链接标签在里面。

利用 CSS :target 伪类选择器

使用 CSS 选择器 [href*="internal-preview"] css here 为包含字符串 "internal-preview" 的锚标签设置样式

@j08691，这不是只适用于带有 [id="internal-review"] 的元素吗？ Chrome 抱怨多个元素共享一个 ID，而不是抛出一个错误，但不是将相同的 ID 应用于多个元素仍然是不好的做法吗？

我不记得曾建议您重复使用 ID。不过，您可以将 ID 应用于 body 元素并创建一组特定的 CSS 规则来使用它。例如。 body#preview h1, body#preview h2... 这样，当 URL 中包含 #preview 时，只有具有该 ID 的正文和 :target 伪类一起应用规则的页面

【参考方案1】：

您可以通过以下方式找到页面的url：

window.location.href

然后，用它来检查锚点是否附加到字符串上。

var url = window.location.href;
var anchor = url.substr(url.lastIndexOf("#") + 1 );

if(anchor === "internal-preview") 
    // Code to activate CSS classes.

要激活 CSS 类，您可以使用以下方法：

$("element_selectors").addClass("new_class");

【参考方案2】：

如果您将“.internal-preview”附加到所有样式更改，这样标识符“canvas.main”的元素可能会在具有标识符“canvas.main.internal-preview”的单独块下排队等待可重新查看的更改。该块优先，更具体。

至于如何根据 URI 进行切换，您可以将侦听器加入到带有事件“加载”的窗口中，并且操作类似于：

()=>
    window.location.href.split("#").forEach(
        (hash_appended)=>
            if(hash_appended === "internal-preview") 
                Array.from(document.getElementsByTagName("*")).forEach(
                    (element)=>element.classList.add("internal-preview");
                );
            
        
    );

请注意，我做了一个 forEach 调用，而不是一个简单的循环。这将允许同时使用多个此类标签，以防您想在同一页面上使用其他此类标志。如果你没有这样的意图，它会变成：

()=>
    if(window.location.href.split("#")[1] === "internal-review")
        Array.from(document.getElementsByTagName("*")).forEach(
            (element)=>element.classList.add("internal-preview");
        );
    

您可以在 jQuery 中做类似的事情，但这不是必需的。这是纯原生解决方案。

【讨论】：

我刚刚意识到这可能无法涵盖在“加载”事件触发后您在文档中的某处附加子项的情况。那些新来的孩子可能会缺少新班级。如果这代表了一个困难的用例，MutationObserver 上的 MDN 页面有一个关于如何将 DOM 操作入队的清晰演示。 developer.mozilla.org/en-US/docs/Web/API/MutationObserver