CODEWITHSUNDEEP
javascripthtmlcss
Daniel Gustafsson
Daniel Gustafsson

Reputation: 1817

Add CSS attributes to element with JavaScript

I want to add CSS attributes to my element, but my current solution loses all previous attributes that had an impact on the element.

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);");
  }
}

Before using this method the element already had the attributes:

float: left;
width: 50px;

Afterwards, the element loses these attributes, leaving only the specific attributes from the JavaScript method. So, I want to add attributes without replacing them.

Upvotes: 49

Views: 135947

Answers (5)

Bastaspast
Bastaspast

Reputation: 1040

jQuery option:

This will add a red border without removing any other inline styles:

jQuery('#element-id').css('border', '1px solid red');

Note: You need to add jQuery as a dependency to your project for this to work.

Upvotes: -5

Jacob
Jacob

Reputation: 1825

Setting the style attribute of the element directly will overwrite any previous value:

element.setAttribute("style", "border: 2px solid red; /* ... */")

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

Instead, set one property at a time using the element.style.property = value syntax:

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"
}

Or, even better, add a conditional CSS class:

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;
}

Upvotes: 1

Javier Sarsa
Javier Sarsa

Reputation: 31

The simplest way for me is:

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);

or with jQuery

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

Upvotes: 3

Fatih Ertuğral
Fatih Ertuğral

Reputation: 347

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);
}

Upvotes: 5

adeneo
adeneo

Reputation: 318162

Setting the style attribute like that, overwrites the attribute and removes previously set styles.

What you really should do is set the styles directly instead by changing the style property :

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)';
    }
}

Upvotes: 63

Related Questions