<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
HTML | DOM Style textAlign Property
</
title
>
<
style
>
#box-element {
border: 1px solid #ff8888;
background-color: #ffaaaa;
}
.screen-center {
margin: 30px auto;
width: 400px;
}
#controls {
text-align: center;
}
#inside-content {
font-size: 0.8rem;
}
</
style
>
</
head
>
<
body
>
<
div
id="box-element" class="screen-center">
<
p
id="inside-content">
An operating system acts as an intermediary
between the user of a computer and computer
hardware. The purpose of an operating system
is to provide an environment in which a user
can execute programs in a convenient and
efficient manner. An operating system is
software that manages the computer hardware.
The hardware must provide appropriate mechanisms
to ensure the correct operation of the computer
system and to prevent user programs from
interfering with the proper operation of
the system.
</
p
>
</
div
>
<
div
id="controls" class="screen-center">
<
label
>Set Alignment: </
label
>
<
select
id="alignment">
<
option
value="left" default>Left</
option
>
<
option
value="right">Right</
option
>
<
option
value="center">Center</
option
>
<
option
value="justify">Justify</
option
>
</
select
>
<
button
id="do-align">Set Align Property</
button
>
</
div
>
<
script
type="text/javascript">
// Collecting elements
let inside_content = document.getElementById(
"inside-content");
let align_option = document.getElementById(
"alignment");
let align_btn = document.getElementById(
"do-align");
// Adding an event to the button
align_btn.onclick = function() {
// Get current value from the dropdown
let align_val =
align_option.options[align_option.selectedIndex].value;
// Set this value to alignment of the content
inside_content.style.textAlign = align_val;
}
</
script
>
</
body
>
</
html
>