Question

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

HTML：

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

脚本：

创建一个<style>标签；
检查此标签中是否已存在.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>

脚本：

检查类并使用/创建它应该属于的媒体（在这种情况下，“ s”代表“小”或“ <600px”，“ m”代表“中”或“ <992px” ）。
将侦听器添加到媒体，并在屏幕大小对应的情况下应用该类。

这有意义吗？有用吗？它已经存在吗？

Answer 1

这是一个粗略的演示，但是我认为这给了您一个想法，以及如何使用CSS Variables来创造更加动态的体验。

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>

用javascript创建“临时CSS”值得吗？

1 个答案: