JavaScript-learning/stylingDom.html at master · HaileeBui/JavaScript-learning · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>Week5css</title>
</head>
<body>
    <ul class="fruits">
        <li>Apple</li>
        <li>Banana</li>
        <li data-foodtype="squishy">Orange</li>
        <li>Pear</li>
        <li>Kiwi</li>
        <li id="berry">Strawberry</li>
    </ul>
<script>
    const berry = document.getElementById('berry');
    console.log(berry);
    berry.style.backgroundColor = "red";
    console.log(`I found the berry: ${berry.innerHTML}`);

    const orange = document.querySelector("li[data-foodtype='squishy']");
    console.log(orange);
    orange.style.backgroundColor = "orange";
    console.log(`I found the fruit: ${orange.innerHTML}`);

    const li = document.getElementsByTagName('li');
    console.log(li);
    li[3].style.backgroundColor = 'green';
    console.log("Using the for loop here: ");
    for(let i = 0; i<li.length; i++){
        console.log(li[i].innerHTML);
        li[i].style.width = 100 + 'px';
        li[i].style.listStyleType = "none";
    }

    const li4 = document.querySelectorAll('li');
    console.log(li4);
    li4.forEach((i) => {
        console.log(i.innerHTML);
        i.style.border =  "thin solid";
    })
</script>
</body>
</html>