代码之家 › 专栏 › 技术社区 › Codex73

将样式附加到dom而不替换现有样式

javascript-events dom css javascript

Codex73 · 技术社区 · 14 年前

我怎么能追加在不删除项上现有样式(如颜色、文本对齐等)的情况下将元素设置为DOM样式?

事件调用函数,但问题是“style”将完全替换为单个项。

我有触发事件的简单代码:

function changeback(onoff) {
   if(onoff) {
      document.getElementById("field1").style.background="#fff";
   } else            
      document.getElementById("field1").style.background="#000";
}

2 回复 | 直到 14 年前

AaronM 14 年前

您使用的浏览器是什么?在Chrome中,这对我很有用:

<html> 
<head> 
<style type="text/css"> 
  .test { background: #ff0000; font-family: "Verdana"; }
</style> 
<script type="text/javascript"> 
  function changeback(onoff)
  {
    if(onoff){
      document.getElementById("field1").style.background="#0f0";
    } else {
      document.getElementById("field1").style.background="#000";
    }
  }
 </script> 
 </head> 
 <body> 
   <h1>Test</h1> 
   <p id="field1" onclick="changeback(true);" class="test">This is a test</p> 
</body> 
</html>

当我点击文本时,背景颜色会改变,但是样式的其余部分(在本例中,字体)保持不变。

这就是你想做的吗?

Sunil Garg 7 年前

你可以这样做:

var elem = document.getElementById('YOUR ELEMENT ID');
elem.style.setProperty('border','1px solid black','');

elem.style 是实现 CSSStyleDeclaration 支持 setProperty 功能。如果您现在检查firebug中的样式属性,您将注意到在元素的样式属性中添加了border属性。

推荐文章

Ezz Deghedy · 如何获取数据和读取响应

1 年前

StuP · 响应式Vue组件在数据更改时不更新

2 年前

burr · 让jQuery选择器识别新添加的DOM元素[关闭]

3 年前

viboven · Javascript DOM未从ID检测到按钮,表示其为null[已关闭]

3 年前

Toufique E Joarder · 将<li>移动到第n个位置并使用JavaScript更改href链接

3 年前

HASEEB ALAM RAFIQ · 如何在react中获取QuerySelector所有html元素?

3 年前

J. Hu · “表单提交已取消,因为表单未连接”[重复]

7 年前

pploypiti · 选择所有其他ID不是“this”的元素。id'

7 年前

xiaolingxiao · 导航到页面后运行javascript

7 年前

Voodoobear · 如何将数字变量插入replaceWith(JavaScript)

7 年前