<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
link
rel
=
"stylesheet"
href
=
<
link
href
=
rel
=
"stylesheet"
>
<
title
>
How to read CSS rule values with JavaScript?
</
title
>
<
style
>
h1 {
text-align: center;
color: green;
}
#para {
font-family: 'Satisfy', cursive;
text-align: justify;
background-color: powderblue;
font-size: 130%;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
hr
/>
<
p
id
=
"para"
>
Cascading Style Sheets, fondly referred
to as CSS, is a simply designed language
intended to simplify the process of
making web pages presentable. CSS allows
you to apply styles to web pages. More
importantly, CSS enables you to do this
independent of the HTML that makes up
each web page.
</
p
>
<
div
class
=
"text-center"
>
<
input
id
=
"my_button1"
type
=
"button"
class
=
"btn btn-success"
value
=
"Read All CSS Values"
>
</
div
>
<
h3
>CSS Values:</
h3
>
<
div
id
=
"my_div"
></
div
>
<
script
>
function append_css(div_name, id_name) {
let elem = document.getElementById(id_name);
let txt = "";
let cssObj = window.getComputedStyle(elem, null);
for (let i = 0; i <
cssObj.length
; i++) {
cssObjProp
= cssObj.item(i);
txt += cssObjProp + " = " +
cssObj.getPropertyValue(cssObjProp) +
"<br>";
}
document.getElementById(div_name)
.innerHTML = txt;
}
document.getElementById("my_button1")
.addEventListener('click', function () {
append_css("my_div", "para");
}, false);
</
script
>
</
body
>
</
html
>