RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-06-01 09:28:13 +00:00
Code Issues Activity Actions

Base: Add a very simple test page for getComputedStyle()

Browse source
This commit is contained in:
Andreas Kling 2021-09-12 19:25:43 +02:00
parent 0bcab60463
commit caa9e1f622
2 changed files with 50 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

48
Base/res/html/misc/computed-style.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<style>
#foo {
color: magenta;
}
#invisible {
display: none;
color: blue;
}
#visible {
display: block;
color: red;
}
</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>
<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)
</script>
</body>
</html>