-
Notifications
You must be signed in to change notification settings - Fork 0
/
no-comments.html
60 lines (60 loc) · 1.94 KB
/
no-comments.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - easy CSSOM and MutationObserver explained</title>
<style>
#text {
background-color: white;
}
#newline {
background-color: yellow;
}
</style>
</head>
<body translate="no">
<input type="text" id="text" placeholder="type something">
<button id="button">Click me!</button>
<div id="elements"></div>
<script>
const textElement = document.querySelector("#text");
const buttonElement = document.querySelector("#button");
const divElement = document.querySelector("#elements");
var observerOptions = {
childList: true,
attributes: true,
subtree: true
};
var observer = new MutationObserver((mutationCallback) => {
function getRule(name){
let stylesheet = document.styleSheets[0].cssRules;
for (let ruleNumber in stylesheet) { //lets navigate through styleshee
if(stylesheet[ruleNumber].selectorText === name){
let rule = stylesheet[ruleNumber].style;
if(rule.getPropertyValue("background-color") === "white"){
rule.setProperty("background-color", "green");
} else {
rule.setProperty("background-color", "white");
}
}
}
}
getRule("#text");
});
observer.observe(divElement, observerOptions);
buttonElement.addEventListener('click', () => {
let newLine = document.createElement('p');
newLine.setAttribute("id", "newline");
newLine.textContent = textElement.value ? textElement.value : "nothing";
divElement.appendChild(newLine);
textElement.value = "";
});
/*I'll let this one here in case you want to give it a try
A smaller way (but more complex to explain) to navigate through the rules object would be:
function getRule(name){
let styleSheet = function(){return Object.values(document.styleSheets[0].cssRules)};
console.log(styleSheet().map(rule => rule.selectorText === name ? name : "othername"));
}
*/
</script>
</body></html>