This content originally appeared on DEV Community and was authored by Joanna
In this post we will learn how to alter the style of the HTML elements using the styling properties.
modifying inline styles
The style property allows you to set the inline style for an element.
Syntax
element.style
For example if you want to set the background-color of an element you can do it like so :
<p>I am a paragraph</p>
let p = document.querySelector("p");
p.style.backgroundColor =' red';
There are plenty of style properties you can set using this syntax such as:
- background
- backgroundAttachment
- backgroundColor
- backgroundImage
- backgroundPosition
- backgroundRepeat
- border
- borderBottom
- borderBottomColor
- borderBottomStyle
- borderBottomWidth
- borderColor
- borderLeft
- borderLeftColor
- borderLeftStyle
- borderLeftWidth
- borderRight
- borderRightColor
- borderRightStyle
- borderRightWidth
The list above is just a couple of properties that are available, but there are many more.
className property
The className property of an element returns a string containing a list of the element's CSS classes, separated by spaces.
Syntax
element.className;
Let's look at an example:
<ul id="list" class="main-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
const list = document.getElementById("list");
console.log(list.className);
classList property
The classList property is a read-only and returns a live collection of CSS classes.
Despite being read-only, the classList can still be used to manipulate the classes it contains.
get classes of an element
<ul id="list" class="main-list 3-item list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
const list = document.getElementById("list");
for( let classes of list.classList){
console.log(classes);
}
add a class to an element
<ul id="list" class="main-list 3-item list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
const list = document.getElementById("list");
list.classList.add("newClass", "another");
for( let classes of list.classList){
console.log(classes);
}
Remove an element's class
<ul id="list" class="main-list 3-item list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
const list = document.getElementById("list");
list.classList.remove('main-list');
for( let classes of list.classList){
console.log(classes);
}
Check if element has a specific class
This property returns a boolean. if the element has that specific class it returns true otherwise it returns false.
<ul id="list" class="main-list 3-item list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
const list = document.getElementById("list");
console.log(list.classList.contains("main-list"));
Toggle property
The toggle() method deletes a class name from an element's class list if it is present and includes the class name in the class list if it is missing.
<ul id="list" class="main-list 3-item list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
const list = document.getElementById("list");
list.classList.toggle("main-list");
for( let classes of list.classList){
console.log(classes);
}
This content originally appeared on DEV Community and was authored by Joanna
Joanna | Sciencx (2023-03-07T21:28:26+00:00) JavaScript Tutorial Series: Manipulating elements styles. Retrieved from https://www.scien.cx/2023/03/07/javascript-tutorial-series-manipulating-elements-styles/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.