Html Question posted in
Some basic documentation can be found here.

Html – How to check css property already present in an element in javascript

I have a div

<div id="myDiv" style="border:1px solid white; width:20px; height: 100px">....</div>

now in Js, if border css property is already present I need to remove that by using

let element = document.getElementById("myDiv")
element.style.removeProperty("border");

if border css property not present, need to add

let element = document.getElementById("myDiv")
element.style.border = '1px solid white'

but, How to check whether the css property(border) exists or not in element(myDiv)

Tags:

2

Answers


  1. 0

    This might be an xy problem, however its often useful to be able to check details on the current computed css. You’re probably looking for the Window method getComputedStyle().

    Something to keep in mind, this will not let you know if you set the style, just what is currently rendered by the browser. A good idea is to check if it is your desired style, if not, apply your desired style.

    Enjoy this small demo of getComputedStyle.

    const box = document.querySelector(".moving-box");

const centerBox = () => {
  box.style.cssText = `
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  `;
};

const alignBoxToTopLeft = () => {
  box.style.cssText = `
    top: 0;
    left: 0;
    translate: unset;
  `;
};

box.addEventListener("mouseenter", () => {
  const compStyles = window.getComputedStyle(box);
  const currentTopValue = compStyles.getPropertyValue("top");
  if (currentTopValue === "0px") {
    centerBox();
  } else {
    alignBoxToTopLeft();
  }
});
    .moving-box {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 1rem;
  font-size: 20pt;
  border-radius: 10px;
  background-color: lightgrey;
  box-shadow: 0 0 2px black;
  user-select: none;
  transition: background-color 0.25s;
}
    <div class="moving-box">🤔</div>

    Of course it’s often better just to toggle a class that encapsulates your css, hopefully this answers the question you had. If you need any clarification, don’t hesitate to ask.

    Login or Signup to reply.
  2. 0

    As others have already pointed out, you can just use a simple if condition to check for the existence of a particular style. If you look for the existence of a color in an inline style, it’d be:

    if (element.style.color) { /* elided */ }

    The below example uses exactly this in toggleStyle:

    const hasStyles = document.querySelector('#has-styles'); // element has inline styles set
const noStyles = document.querySelector('#no-styles');   // element has no inline styles set

const toggleStyle = (el, style, value) => {
  if (el.style[style]) {                                 // if an inline style is set...
    el.style[style] = '';                                // ... remove it
  } else {
    el.style[style] = value;                             // ... otherwise add it
  } 
};

toggleStyle(hasStyles, 'color', 'white');
toggleStyle(noStyles, 'color', 'white');
    div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background-color: #aaa;
  color: #222;
}
    <div id="has-styles" style="background:red;color:white">Has styles</div>
<div id="no-styles">No styles</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search