-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjs_css.html
More file actions
70 lines (55 loc) · 2.04 KB
/
Copy pathjs_css.html
File metadata and controls
70 lines (55 loc) · 2.04 KB
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<style>
.disableMenu {
display: none;
}
</style>
<body>
<ul id="dropDown">
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li>
</ul>
<p id="pp">This is a paragraph.</p>
<div id="some-element">Hello, world!</div>
<p id="aa">Dynamic style - manipulating CSS with JavaScript - W3C Wiki</p>
<p id="bb">Set and get CSS styles of elements - plainJS</p>
<script>
//var theDropDown = document.querySelector("#dropDown");
//theDropDown.classList.add("disableMenu");
var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.remove("disableMenu");
var elem = document.querySelector('#some-element');
/*elem.style.color = 'red';
elem.style.backgroundColor = 'yellow';*/
var par = document.querySelector('#pp');
par.style.color = 'white';
par.style.backgroundColor = 'red';
var sheet = 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);*/
var el = document.querySelector('#aa');
//el.style.backgroundColor = 'green';
//el.style.display = 'block';
//el.style['border-radius'] = '5px';
el.style.cssText += 'background: green; display: block;';
function css(el, styles) {
for (var property in styles)
el.style[property] = styles[property];
}
// example
var el = document.querySelector('#bb');
css(el, { background: 'yellow', display: 'block', 'border-radius': '5px' });
</script>
</body>
</html>