<!DOCTYPE html>
<html>
<head>
<style>
#foo {
color: magenta;
}
#invisible {
display: none;
color: blue;
}
#visible {
display: block;
color: red;
}
p {
display: inherit;
opacity: 50%;
font-size: 90%;
background: white;
cursor: col-resize;
border-radius: 30px 1cm;
}
p#yak {
flex: content;
height: 60px;
left: -4%;
padding: 6cm;
margin: auto;
border: 5px solid blue;
}
</style>
</style>
</head>
<body>
<div id=foo>Some text</div>
<div id=bar style="color: green">Other text</div>
<div id=invisible>You cannot see me</div>
<div id=visible>You CAN see me</div>
<p id="yak">Lorem Yaksum dolor sit yakkety...</p>
<script>
// #foo
var foo = document.getElementById("foo");
var fooStyle = window.getComputedStyle(foo);
console.log(fooStyle.color);
// #bar
var bar = document.getElementById("bar");
var barStyle = bar.style;
console.log(barStyle.color);
// #invisible
var invisible = document.getElementById("invisible");
var invisibleStyle = getComputedStyle(invisible);
console.log(invisibleStyle.display)
console.log(invisibleStyle.color)
// #visible
var visible = document.getElementById("visible");
var visibleStyle = getComputedStyle(visible);
console.log(visibleStyle.display)
console.log(visibleStyle.color)
var yak = document.getElementById("yak");
var yakStyle = getComputedStyle(yak);
for (style of ['font-size', 'border', 'padding', 'margin', 'flex', 'height', 'left', 'cursor', 'display', 'background', 'opacity', 'border-radius']) {
console.log(style, yakStyle[style])
}
</script>
</body>
</html>
