Category: CSS

Sometimes, we want to change an element’s class with JavaScript.

In this article, we’ll look at how to change an element’s class with JavaScript.

How to change an element’s class with JavaScript?

To change an element’s class with JavaScript, we use the classList property.

For instance, we write

document.getElementById("MyElement").classList.add("MyClass");

document.getElementById("MyElement").classList.remove("MyClass");

if (document.getElementById("MyElement").classList.contains("MyClass")) {
  //...
}

document.getElementById("MyElement").classList.toggle("MyClass");

to use classList.add to add the MyClass class.

We use classList.remove to remove the MyClass class.

And we use classList.contains to check if the MyClass class is in the element.

We use classList.toggle to toggle the MyClass class on the element.

Conclusion

To change an element’s class with JavaScript, we use the classList property.

Sometimes, we want to set cell padding and cell spacing in CSS.

In this article, we’ll look at how to set cell padding and cell spacing in CSS.

How to set cell padding and cell spacing in CSS?

To set cell padding and cell spacing in CSS, we can set the border-spacing and border-collapse, padding CSS properties.

For instance, we write

td {
  padding: 10px;
}

table {
  border-spacing: 10px;
  border-collapse: separate;
}

to set the padding of the cells with

td {
  padding: 10px;
}

Then we set the border-spacing CSS property to set the cell spacing.

border-collapse is set to separate so the borders of the cells have spacing.

Conclusion

To set cell padding and cell spacing in CSS, we can set the border-spacing and border-collapse, padding CSS properties.

Sometimes, we want to change an HTML5 input’s placeholder color with CSS.

In this article, we’ll look at how to change an HTML5 input’s placeholder color with CSS.

How to change an HTML5 input’s placeholder color with CSS?

To change an HTML5 input’s placeholder color with CSS, we can use the *::placeholder CSS selector.

For instance, we write

<input placeholder="hello" /> <br />
<textarea placeholder="hello"></textarea>

to add an input and a text area.

Then we write

*::-webkit-input-placeholder {
  color: red;
}
*:-moz-placeholder {
  /* FF 4-18 */
  color: red;
  opacity: 1;
}
*::-moz-placeholder {
  /* FF 19+ */
  color: red;
  opacity: 1;
}
*:-ms-input-placeholder {
  /* IE 10+ */
  color: red;
}
*::-ms-input-placeholder {
  /* Microsoft Edge */
  color: red;
}
*::placeholder {
  /* modern browser */
  color: red;
}

to use the *::placeholder to select the placeholder of the input and text area.

We add browser prefixes to target different browsers.

And we change its color to red.

Conclusion

To change an HTML5 input’s placeholder color with CSS, we can use the *::placeholder CSS selector.

Sometimes, we want to horizontally center an element with CSS.

In this article, we’ll look at how to horizontally center an element with CSS.

How to horizontally center an element with CSS?

To horizontally center an element with CSS, we can use flexbox.

For instance, we write

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

to add a div within a div.

Then we write

#inner {
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width: 100%;
  display: flex;
  justify-content: center;
}

to add display: flex and justify-content: center; to horizontally center the contents inside.

Conclusion

To horizontally center an element with CSS, we can use flexbox.