自定义标记用于在页面上放置永久和临时CSS

Custom tags to place permanent and temporary CSS on page

本文关键字：CSS 用于 自定义      更新时间：2023-09-26

我有一个单页的web应用程序，我计划动态地添加和删除CSS <style></style>标签，对于需要和不需要某些样式的页面。我不想有样式重叠或不得不调试奇怪的问题，所以为了简单起见(也许甚至更快的呈现)，我想删除不属于当前视图的样式表。

我想用这样的结构:

    <html>
    <head>
     <!-- this linked stylesheet is for all pages, so it is non-ephemeral -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <special> <!-- this block houses ephemeral stylesheets -->
    <!-- remove all the stylesheets from this block everytime there's a view  --> 
    <!-- change and then add only the stylesheets that pertain to the current view here as well -->
     <style class='temporaryCSS"> xyz </style>
    </special>
    </head>
    <body>
    </body>
    </html>

所以基本上，可以有一个特殊的/特殊的块，我删除所有的CSS标签在每个视图的变化。自定义块的好处是，它可以快速指定临时/临时样式表所在的位置。所以我的问题是，(1)我可以为此创建自己的标签，如<special>或我应该使用<div>与id(似乎是一个坏主意，因为div是视觉而不是元数据)，或者我应该只是给所有临时CSS标签一个类属性，如"temporaryCSS"?(2)我应该把临时单放在<head>还是<body> ?(3)也许我做的这一切都错了?

有人以前尝试过这样的东西吗?

为标签使用一个类的好处是，我可能只需要使用一个jQuery选择器和.remove()的一切与这个类。

我在回答自己的问题。<style>标签可能不应该动态地从DOM中添加和删除，因为这是DOM流失。相反，您可以将样式标签设置为活动或非活动/启用/禁用，如下所示:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

动态地"添加"answers"删除"样式似乎是完全合理的。

相关文章：