使用 javascript 编辑类（不是元素的内联样式）答案

【问题标题】：Using javascript to edit class (not inline styles on elements)使用 javascript 编辑类（不是元素的内联样式）
【发布时间】：2017-07-24 18:58:48
【问题描述】：

我不认为这是可能的，但无论如何我还是想要您的意见。假设我有这样的风格：

<style>
  .something{
    height : 100px;
  }
</style>

然后我的 HTML 看起来像这样：

<ul>
  <li class="something">1</li>
  <li class="something">2</li>
  <li class="something">3</li>
</ul>

现在我想更改类“.something”中的值“height”，而不是设置<li> 元素的新高度。如果我在元素上设置样式，然后添加更多 <li> 元素，它们将具有类“.something”的原始高度

我想要做的是让用户添加<li> 元素并选择所有元素的高度。我知道我可以使用 javascript 设置它们，并且只记得在添加它们时设置新的 <li> 元素，但如果我能以某种方式进行更改会很方便：

<style>
  .something{
    height : 100px;
  }
</style>

例如

<style>
  .something{
    height : 85px;
  }
</style>

使用javascript

【问题讨论】：

【解决方案1】：

最好在样式元素上放置一个标识（attribute, id, name），这样你就可以定位特定的样式（DOM）元素（当有很多时会有帮助），然后替换内部的html 例如：

<style id="targetStyle">
  .something{
    height : 100px;
  }
</style>

然后在你的javascript中

var styleDom = document.getElementById('targetStyle');
styleDom.innerHTML = styleDom.innerHTML.replace(/height.*px;/,'height: 85px;');

根据您的用例正确构建正则表达式，这只是一个粗略的示例，用于描述如何实现这一点，而不是如何深入替换字符串。

【讨论】：