Question

如何在不消除项目上的现有样式（例如颜色，文本对齐等）的情况下追加样式元素到DOM？

事件调用该函数，但问题是'Style'完全被替换为单个项目。

我在事件上触发了简单的代码：

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

Answer 1

您使用的是哪种浏览器？在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>

单击文本时，背景颜色会发生变化，但样式的其余部分（在本例中为字体）保持不变。

这是你想要做的吗？

Answer 2

以下是如何做到这一点：

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

elem.style是一个实现CSSStyleDeclaration接口的对象，它支持setProperty函数。如果现在检查Firebug中的样式属性，您会注意到元素的style属性中添加了border属性。

将样式附加到DOM而不是替换现有的样式

2 个答案: