时间戳

首页 > 解决方案 > 用javascript创建一个“临时css”值得吗？

javascript - 用javascript创建一个“临时css”值得吗？

问题描述

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

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. 如果屏幕尺寸对应，则向媒体添加一个侦听器并应用该类。

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

标签： javascripthtmlcss

解决方案

这是一个粗略的演示，但我认为这可以让您了解如何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>

推荐阅读