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

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

javascript-events dom css javascript

1

Codex73 · 技术社区 · 15 年前

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

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

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

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

2 回复 | 直到 15 年前

1

7

AaronM 15 年前

您使用的浏览器是什么?在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>

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

这就是你想做的吗?

2

6

Sunil Garg 7 年前

你可以这样做:

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

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