js动态添加和移除样式

• mounted 钩子
  ：

• 作用：在组件挂载到 DOM 后执行。
• 用途：动态添加样式。
• 示例：

mounted() {
      const style = document.createElement('style');
      style.type = 'text/css';
      style.id = 'dynamic-body-style';
      style.innerHTML = `
        body {
          min-width: 0 !important;
        }
      `;
      document.head.appendChild(style);
    }

• beforeDestroy 钩子
  ：

• 作用：在组件销毁前执行。
• 用途：移除之前动态添加的样式。
• 示例：

beforeDestroy() {
      const style = document.getElementById('dynamic-body-style');
      if (style) {
        document.head.removeChild(style);
      }
    }

1. style.type = 'text/css';

作用

这行代码设置了 style 元素的 type 属性为 'text/css'。type 属性指定了样式表的 MIME 类型。

详细解释

• type 属性：HTML 中的 type 属性用于指定元素的 MIME 类型。在 <style> 元素中，type 属性通常设置为 'text/css'，表示这是一个 CSS 样式表。
• 默认值：在现代浏览器中，<style> 元素的 type 属性默认就是 'text/css'，所以即使不设置这行代码，浏览器也会将其视为 CSS 样式表。不过，显式设置 type 属性可以提高代码的可读性和兼容性。

示例

const style = document.createElement('style');
style.type = 'text/css'; // 设置样式表的 MIME 类型为 'text/css'

2. style.id = 'dynamic-body-style';

作用

这行代码设置了 style 元素的 id 属性为 'dynamic-body-style'。id 属性用于唯一标识这个 style 元素，以便在需要时可以方便地找到和操作它。

详细解释

• id 属性：HTML 中的 id 属性用于为元素指定一个唯一的标识符。通过这个标识符，可以使用 JavaScript 快速找到和操作这个元素。
• 唯一性：id 属性的值在整个 HTML 文档中应该是唯一的，这样可以确保通过 document.getElementById 方法找到的元素是唯一的。
• 方便操作：在动态添加和移除样式时，给 style 元素设置一个唯一的 id 可以方便地找到并移除这个样式。

示例

const style = document.createElement('style');
style.id = 'dynamic-body-style'; // 设置样式表的唯一标识符