mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
72 lines
1.5 KiB
HTML
72 lines
1.5 KiB
HTML
<!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>
|