使用 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;');

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