代码之家 › 专栏 › 技术社区 › 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 6 年前

你可以这样做:

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

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前