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

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

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

function checkNr(id) {
  var value = document.getElementById(id).value;
  if (parseFloat(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 (parseFloat(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 (parseFloat(elem.value) == NaN) {
        css = { border: '2px solid red', backgroundColor: 'rgb(255, 125, 115)' };
    } else {
        css = { border: 'none', backgroundColor: 'rgb(255, 255, 255)' };
    }
    Object.assign(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(parseFloat(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(parseFloat(element.value))
  element.classList.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;
}

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

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

相关推荐

  • javascript面试题及答案:如何使用JavaScript来解决复杂的编程问题?

    示例示例什么是 是一种轻量级的、跨平台的、弱类型的、基于原型的、动态语言,用于创建交互式网页应用程序。它可以在所有主流的Web浏览器中运行,也可以在服务器端运行,使用Node.js技术。代码示例:…

    2022-12-30 05:48:36
    0 90 55
  • java 和 javascript从入门到精通

    Java 是一种面向对象的编程语言,它使用类和对象来编写代码。它可以用于构建应用程序,Web 应用程序,移动应用程序,游戏,数据库和系统软件。它运行在 Java 虚拟机上,并且可以在任何支持 Java 的平台上运行。…

    2023-01-10 11:23:08
    0 87 35
  • javascript的组成部分从ECMAScript到DOM的完整开发体验

    示例示例是一种轻量级的、解释型的、面向对象的客户端脚本语言,用于创建动态网页。它的组成部分包括:语法:的语法与C语言类似,它使用变量、常量、数据类型、运算符、函数、循环等来组成语句,并通过它们来实现复杂的程序逻辑。…

    2023-01-24 11:08:57
    0 74 95
  • idea javascript 插件:使用Idea JavaScript插件创建高效的Web应用程序

    IDEA JavaScript 插件是一种用于在 IntelliJ IDEA 中开发 JavaScript 应用程序的插件。它提供了一个专门的 JavaScript 编辑器,允许开发者使用代码提示、代码格式化和语法高亮来编写 JavaScript 代码。它还提供了一个 JavaScript 调试器,可以帮助开发者检查 JavaScript 代码的正确性,并跟踪代码执行的过程。…

    2023-01-10 09:34:18
    0 66 10
  • javascript自定义函数:function generateTitle(title) { return `${title

    示例示例自定义函数是指用户可以根据自己的需求,自行编写函数来完成特定的功能。下面是一个简单的自定义函数的代码示例:…

    2023-01-20 07:01:35
    0 74 58
  • javascript手册中文版:Array.prototype.reduce()

    javascript手册中文版是一本介绍javascript语言的参考手册,主要包括javascript语法、基本语法、核心对象、客户端对象、浏览器对象模型等内容。…

    2023-01-29 10:49:54
    0 87 59
  • Broader:Javascript-链接到更大数组的值的数组

    关于Broader的问题,在broader array中经常遇到,我在 Javascript 中工作并创建一个离线应用程序。…

    2022-12-11 05:05:38
    0 49 63
  • Php用语言入门:Javascript作为通用语言

    关于Php用语言入门的问题,在purpose of javascript中经常遇到,在我参加的一个周末极客研讨会上,几位导师赞扬了 Javascript 的优点。我在一定程度上使用了 Javascript,但是他们的热情使我想靠近一点。…

    2022-12-11 12:20:55
    0 57 28

发表评论

登录 后才能评论

评论列表(48条)