使用JavaScript将CSS属性添加到元素

我想将 CSS 属性添加到我的元素中,但我当前的解决方案会丢失对元素产生影响的所有先前属性。

我想将 CSS 属性添加到我的元素中,但我当前的解决方案会丢失对元素产生影响的所有先前属性。

function checkNr(id) {
  var value = document.getElementById(id).value;
  if (pFloat(value) == NaN) {
    document.getElementById(id).setAttribute("style", "border:2px solid red; background-color: rgb(255, 125, 115);");
  }
  else {
    document.getElementById(id).setAttribute("style", "border:default; background-color: rgb(255, 255, 255);");
  }
}

在使用此方法之前,元素已经具有以下属性:

float: left;
width: 50px;

之后,元素会丢失这些属性,只留下 JavaScript 方法中的特定属性。所以,我想添加属性而不替换它们。

60

像这样设置样式属性,将覆盖该属性并删除以前设置的样式。

你真正应该做的是直接设置样式,而不是通过更改样式属性:

function checkNr(id) {
    var elem  = document.getElementById(id),
        value = elem.value;
    if (pFloat(value) == NaN) {
        elem.style.border = '2px solid red'; 
        elem.style.backgroundColor = 'rgb(255, 125, 115)';
    } else {
        elem.style.border = 'none'; 
        elem.style.backgroundColor = 'rgb(255, 255, 255)';
    }
}
4
function checkNr(id) {
    var elem = document.getElementById(id);
    var css = {};
    if (pFloat(elem.value) == NaN) {
        css = { border: '2px solid red', backgroundColor: 'rgb(255, 125, 115)' };
    } else {
        css = { border: 'none', backgroundColor: 'rgb(255, 255, 255)' };
    }
    Object.ign(elem.style, css);
}
3

对我来说最简单的方法是:

prev_style=obj.getAttribute("style");
added_style="background-color:red;"
if (prev_style==undefined || prev_style==null) { prev_style="" }
obj.setAttribute("style",prev_style+added_style);

或使用 jQuery

$(obj).attr("style",prev_style+added_style)
0

直接设置元素的样式属性将覆盖任何以前的值:

element.setAttribute("style", "border: 2px solid red; /* ... */")
<div id="element" style="float: right; /* ... */">...</div>
<!-- becomes -->
<div id="element" style="border:; 2px solid red; /* ... */">...</div>

相反,使用element.style.property = value语法一次设置一个属性:

const checkNr = id => {
  const element = document.getElementById(id)
  const isNotNum = isNaN(pFloat(element.value))
  element.style.background = `rgb(255, ${isNotNum ? "125, 115" : "255, 255"})`
  element.style.border = isNotNum ? "2px solid red" : "default"
}

或者,更好的是,添加一个条件 CSS 类:

const checkNr = id => {
  const element = document.getElementById(id)
  const isNotNum = isNaN(pFloat(element.value))
  element.clList.add(isNotNum ? "not-number" : "is-number");
}
.not-number {
  background-color: rgb(255, 125, 115);
  border: 2px solid red;
}
.is-number {
  background-color: rgb(255, 255, 255);
  border: default;
}

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(522)
如何在不使用excel互操作库的情况下将excel工作簿转换为 pdf
上一篇
DynamicsCRM2013:工作流设计器布尔值和Optionset字段设置值消失
下一篇

相关推荐

  • javascript交互效果:使用JavaScript轻松实现交互效果

    JavaScript交互效果是指,当用户与网页进行交互时,网页会有相应的反应,以及动态效果。例如:鼠标移动到一个元素上,元素就会改变颜色;点击某个按钮,网页就会显示新的内容;滚动页面,某个元素就会固定在页面上,等等。…

    2023-05-07 12:38:50
    0 60 38
  • javascript 替换字符串 Hello JavaScript

    JavaScript 替换字符串可以使用 String.prototype.replace() 方法来实现。该方法接受两个参数,第一个参数是要被替换的子字符串,第二个参数是用来替换的字符串。…

    2023-05-03 03:39:37
    0 13 59
  • javascript 正则表达式 在线 John Smith

    JavaScript 正则表达式在线是一种用于搜索和替换文本的强大工具。它们可以用来验证文本,查找特定的字符串,替换文本,或者用于数据提取等等。…

    2023-05-12 14:25:27
    0 66 94
  • javascript垃圾回收机制如何优化内存使用

    JavaScript垃圾回收机制是一种自动内存管理机制,它可以帮助开发人员释放不再使用的内存。它可以跟踪变量和对象,并在不再需要时自动释放内存。…

    2023-04-30 03:43:42
    0 19 36
  • javascript的输出语句:使用JavaScript输出结果

    JavaScript的输出语句是指在网页中显示文本或其他内容的语句,常用的输出语句有document.write()、window.alert()和console.log()。…

    2023-02-09 10:17:17
    0 95 41
  • javascript注释方法:如何使用 JavaScript 注释

    示例示例注释方法有两种:单行注释和多行注释。单行注释:在要注释的代码行前加上“//”,它可以注释掉一行或者一部分代码,其代码示例如下:…

    2023-03-11 10:17:25
    0 58 68
  • javascript时钟:时钟转动,生活不断变化

    示例示例时钟是一种可以在网页中显示当前时间的功能,它可以使用来实现。下面是一个简单的时钟的示例代码:…

    2023-04-24 04:21:30
    0 11 28
  • javascript前端框架:使用Vue.js构建卓越的Web应用

    javascript前端框架是指以javascript为基础的一种用于开发Web应用程序的框架。它提供了一种结构化的方式,使开发者可以快速地构建动态网页应用程序。…

    2023-04-29 06:48:41
    0 19 48

发表评论

登录 后才能评论

评论列表(18条)