JavaScript element.style.property
last modified April 2, 2025
In this article, we explore the element.style.property in JavaScript.
This property allows direct manipulation of an element's inline styles, providing
dynamic control over appearance and layout.
Basic Definition
The element.style property returns a CSSStyleDeclaration
object that represents an element's style attribute. It provides access to all
inline CSS properties of that element.
Properties are accessed and modified using camelCase versions of CSS property
names. For example, background-color becomes
backgroundColor in JavaScript.
Changes made through element.style apply directly to the element's
inline style attribute, overriding any styles from external CSS files or
<style> tags.
Changing Background Color
This example demonstrates how to change an element's background color using
element.style.backgroundColor.
<!DOCTYPE html>
<html>
<head>
<title>Background Color Change</title>
</head>
<body>
<div id="colorBox" style="width: 200px; height: 200px; border: 1px solid black;">
Click to change color
</div>
<script>
const box = document.getElementById('colorBox');
box.addEventListener('click', function() {
this.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);
});
</script>
</body>
</html>
In this example, we have a div element that changes its background color when clicked. The color is generated randomly using hexadecimal notation.
The style.backgroundColor property is set to a new value each time
the element is clicked. Note how the CSS property name is camelCased in
JavaScript.
Animating Element Position
This example shows how to animate an element's position using
element.style properties.
<!DOCTYPE html>
<html>
<head>
<title>Position Animation</title>
<style>
#movingBox {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="movingBox"></div>
<button id="animateBtn">Start Animation</button>
<script>
const box = document.getElementById('movingBox');
const btn = document.getElementById('animateBtn');
let pos = 0;
let animationId;
btn.addEventListener('click', function() {
if (animationId) {
cancelAnimationFrame(animationId);
animationId = null;
btn.textContent = 'Start Animation';
return;
}
btn.textContent = 'Stop Animation';
animate();
});
function animate() {
pos = (pos + 2) % 400;
box.style.left = pos + 'px';
box.style.top = pos + 'px';
animationId = requestAnimationFrame(animate);
}
</script>
</body>
</html>
This example creates a simple animation where a box moves diagonally across the
screen. The position is updated using style.left and
style.top properties.
The animation uses requestAnimationFrame for smooth performance.
Note how we must include units (px) when setting position values.
Toggle Visibility
This example demonstrates how to toggle an element's visibility using
element.style.display.
<!DOCTYPE html>
<html>
<head>
<title>Toggle Visibility</title>
</head>
<body>
<button id="toggleBtn">Toggle Content</button>
<div id="content" style="padding: 20px; background-color: #f0f0f0; margin-top: 10px;">
This content can be shown or hidden.
</div>
<script>
const btn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
btn.addEventListener('click', function() {
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
</script>
</body>
</html>
In this example, clicking the button toggles the visibility of the content div
by switching its display style property between 'none' and 'block'.
This is a common pattern for showing/hiding elements. The initial state is
determined by checking the current value of style.display.
Dynamic Font Styling
This example shows how to dynamically change font properties using
element.style.
<!DOCTYPE html>
<html>
<head>
<title>Font Styling</title>
</head>
<body>
<div id="text" style="padding: 20px;">
This text will change based on your selections.
</div>
<select id="fontFamily">
<option value="Arial">Arial</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
</select>
<input type="range" id="fontSize" min="10" max="40" value="16">
<script>
const text = document.getElementById('text');
const fontFamily = document.getElementById('fontFamily');
const fontSize = document.getElementById('fontSize');
fontFamily.addEventListener('change', function() {
text.style.fontFamily = this.value;
});
fontSize.addEventListener('input', function() {
text.style.fontSize = this.value + 'px';
});
</script>
</body>
</html>
This example allows users to change the font family and size of text using form
controls. The changes are applied immediately through style.fontFamily
and style.fontSize.
Note how the font size requires units (px) while the font family accepts string values directly. Event listeners respond to user input in real-time.
Complex Style Transformations
This example demonstrates complex style transformations using
element.style.transform.
<!DOCTYPE html>
<html>
<head>
<title>Transformations</title>
<style>
#transformBox {
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 50px auto;
transition: transform 0.5s ease;
}
</style>
</head>
<body>
<div id="transformBox"></div>
<button id="rotateBtn">Rotate</button>
<button id="scaleBtn">Scale</button>
<button id="resetBtn">Reset</button>
<script>
const box = document.getElementById('transformBox');
const rotateBtn = document.getElementById('rotateBtn');
const scaleBtn = document.getElementById('scaleBtn');
const resetBtn = document.getElementById('resetBtn');
rotateBtn.addEventListener('click', function() {
box.style.transform = 'rotate(45deg)';
});
scaleBtn.addEventListener('click', function() {
box.style.transform = 'scale(1.5)';
});
resetBtn.addEventListener('click', function() {
box.style.transform = 'none';
});
</script>
</body>
</html>
This example shows how to apply CSS transforms through JavaScript. The box can be rotated, scaled, or reset to its original state using the buttons.
The transition property in CSS ensures smooth animations between
states. Multiple transforms can be combined in a single string for more complex
effects.
Source
MDN HTMLElement.style Documentation
In this article, we have explored the element.style.property in
JavaScript. This powerful feature enables dynamic styling of web pages,
allowing for interactive and responsive user interfaces.
Author
List all JS DOM tutorials.