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>
<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>