JavaScriptPractice/js_css.html at main · EduKeyPath/JavaScriptPractice · GitHub

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
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>demo</title>
</head>
<style>
.disableMenu {
display: none;
}
</style>
<body>
<ulid="dropDown">
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li>
</ul>

<pid="pp">This is a paragraph.</p>

<divid="some-element">Hello, world!</div>

<pid="aa">Dynamic style - manipulating CSS with JavaScript - W3C Wiki</p>

<pid="bb">Set and get CSS styles of elements - plainJS</p>

<script>
//var theDropDown = document.querySelector("#dropDown");
//theDropDown.classList.add("disableMenu");

vartheDropDown=document.querySelector("#dropDown");
theDropDown.classList.remove("disableMenu");

varelem=document.querySelector('#some-element');
/*elem.style.color = 'red';
 elem.style.backgroundColor = 'yellow';*/

varpar=document.querySelector('#pp');
par.style.color='white';
par.style.backgroundColor='red';

varsheet=document.createElement('style');
//sheet.innerHTML = "div {border: 2px solid black; color:#fff; background-color: blue; height:50px; text-align:center;}";
sheet.innerHTML="div"+
"{border: 2px solid black;"+
"color:#fff; background-color: blue;"+
"height:50px; text-align:center;}";
document.body.appendChild(sheet);

/*var sheetToBeRemoved = document.getElementById('some-element');
 var sheetParent = sheetToBeRemoved.parentNode;
 sheetParent.removeChild(sheetToBeRemoved);*/

varel=document.querySelector('#aa');
//el.style.backgroundColor = 'green';
//el.style.display = 'block';
//el.style['border-radius'] = '5px';
el.style.cssText+='background: green; display: block;';

functioncss(el,styles){
for(varpropertyinstyles)
el.style[property]=styles[property];
}
// example
varel=document.querySelector('#bb');
css(el,{background: 'yellow',display: 'block','border-radius': '5px'});


</script>

</body>
</html>