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

亨里克·克劳森(Henrik Clausen)

我不认为这是可能的,但是无论如何我都希望您的投入。可以说我有这样的风格:

<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

库什克·查特吉

最好在style元素上放置一个标识(属性,id,名称),以便您可以定位特定的style(DOM)元素(如果有很多元素,将很有帮助),然后替换内部html,例如:

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

然后在你的JavaScript中

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

根据您的用例正确构建Regex,这只是一个粗略的示例,用于在部分上描述如何实现此功能,而不是如何深度替换字符串。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在输入元素上合并类样式和内联样式?

使用类而不是内联的Javascript onclick

使用JavaScript更改样式表中没有的类样式(不是单个元素)

用JavaScript编辑的内联样式将被忽略

使用Javascript添加内联样式

使用内联样式计算子元素

jQuery:检查元素是否具有特定样式(不是内联)

Javascript-使用类向元素添加CSS样式

内联 Javascript 停止向元素添加类

jqGrid-在“编辑”而不是“添加”上禁用内联下拉列表

表单的内联样式或类

使用 javascript 或 jquery 更改内联样式

使用Javascript | jQuery删除特定的内联样式

如何在RadEditor控件的body元素上设置内联样式

创建可编辑样式JS或内联样式

使用有效样式(使用从CSS类继承的样式,未在元素上显式)的jQuery查找HTML元素

如何使内联样式更紧凑而不是使用多个变量?

在内联或内联块元素上使用CSS Ellipsis

在Bootstrap输入元素上使用内联文本

如何使用开发人员工具样式编辑器实时编辑动态 javascript 元素的 CSS?

如何使用 CSS 覆盖包含元素的内联样式?

JavaScript:更改类指定的元素的样式

如何在不使用内联样式表的情况下将此元素的颜色传递给javascript?

使用反应内联样式在彼此相邻的图像上添加文本

路径元素上的Javascript类

使用javascript类中的requestAnimationFrame在屏幕上移动html元素

在mouseEnter上使用JavaScript向元素添加和删除类

如何强制所有具有内联样式的HTML元素或具有display:none的类对于使用Dev Tools进行调试是不可见的

使用python selenium chromedriver获取htlm内联元素类的文本