javascript - 使用 javascript 编辑类(不是元素上的内联样式)

Question

我不认为这是可能的，但无论如何我都需要你的意见。假设我有这样的风格:

<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

Answer 1

最好在样式元素上放置一个标识(属性、id、名称)，这样您就可以针对特定的样式 (DOM) 元素(当有很多时会有帮助)，然后替换内部 html例如:

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

然后在你的 javascript 中

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

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