javascript - 用 javascript 创建一个 "temporary css"值得吗？

Question

我正在考虑创建一个脚本，允许我在样式标签中创建一些动态类。即:

HTML:

<p class="padding-top-24">test</p>

脚本:

1. 创建一个 <style>标签；
2. 检查是否.padding-top-24已经存在于该标签中，如果不存在，则创建类并在元素中使用她；

但这值得吗？我的意思是，我知道我可以简单地使用 style="padding-top: 24px" ，但是如果我想要更具体的东西，比如元素只有 padding-top: 24px 的类，该怎么办？当用户在小屏幕上时？

同样，我可以使用 @media (max-width: 600px) { .pading-top-24px { padding-top: 24px } } ，但我需要创建一个 @media每次我希望某些东西在特定时刻具有不同的属性时。

如果我创建一个脚本，每次我只使用一个类时都为我做这件事，那不是更好吗？使用特定尺寸来创建媒体。像这样的东西:

HTML:

<p class="s-font-size-20 m-font-size-24">Hello</p>

脚本:

1. 检查类并使用/创建它应该属于的媒体(在这种情况下，“s”代表“小”或“<600px”，“m”代表“中”或“<992px” ).
2. 向媒体添加一个监听器，并在屏幕尺寸对应时应用该类。

有意义吗？会有用吗？它已经存在了吗？

Answer 1

这是一个粗略的演示，但我认为这让您了解如何使用 CSS 变量 来创建更动态的体验。

document.addEventListener('click', (e) => {
  if(e.target.matches('button')) {
    let color = document.querySelector('#colorList').value;
    document.documentElement.style.setProperty('--fontColor', color);
    
    if(color === '#0f0') {
      document.documentElement.style.setProperty('--fontSize', '40px');
    }
  }
});

:root {
    --fontColor: #0069aa;
    --fontSize: 20px;
   
}

.test {
  color: var(--fontColor);
  font-size: var(--fontSize);
}

h1 {
  color: var(--fontColor);
}

<h1>Heading Test</h1>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
<span class="test">Test</span>
<button>Click</button>
<select id="colorList">
  <option value="#f00">Red</option>
  <option value="#0f0">Green</option>
  <option value="#00f">Blue</option>
</select>