Page 181 - Computer Software Application TP - Volume 1
P. 181
COMPUTER SOFTWARE APPLICATION - CITS
TASK 9 : Directly manipulating the style property of HTML elements using Javascript
1 Open the text editor
2 Write the following codes
<html>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Directly Manipulating Style Property</title>
<style>
/* CSS for demonstration purposes only */
.box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div id=”box1” class=”box”>Box 1</div>
<div id=”box2” class=”box”>Box 2</div>
<script>
// Get references to the HTML elements
const box1 = document.getElementById(‘box1’);
const box2 = document.getElementById(‘box2’);
// Apply CSS styles programmatically
box1.style.backgroundColor = ‘red’;
box1.style.color = ‘black’;
box1.style.border = ‘2px solid black’;
166
CITS : IT & ITES - Computer Software Application - Exercise 44
