codingBatJS/button-changes-style.html at master · atom-box/codingBatJS · 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS DOM paragraph style</title>
</head>
<body>
<p id ='text'>JavaScript Exercises - w3resource</p>
<div class="wide-box">
    <div id="wikiversity_wrap">
      <h1>Shakespeare's Sonnet #18</h1>
      <p>
         This is one of the most famous of the sonnets. It is referenced
         in the film Dead Poets Society and gave names to the band The
         Darling Buds and the book and television series The Darling Buds
         of May. Read it and weep!
      </p>
      <ul>
        <li>Shall I compare thee to a summer's day?</li>
        <li>Thou art more lovely and more temperate:</li>
        <li>Rough winds do shake the darling buds of May,</li>
        <li>And summer's lease hath all too short a date:</li>
        <li>Sometime too hot the eye of heaven shines,</li>
        <li>And often is his gold complexion dimm'd,</li>
        <li>And every fair from fair sometime declines,</li>
        <li>By chance, or nature's changing course untrimm'd:</li>
        <li>But thy eternal summer shall not fade,</li>
        <li>Nor lose possession of that fair thou ow'st,</li>
        <li>Nor shall death brag thou wander'st in his shade,</li>
        <li>When in eternal lines to time thou grow'st,</li>
        <li>So long as men can breathe, or eyes can see,</li>
        <li>So long lives this, and this gives life to thee.</li>
      </ul>

      <p class="copyright">See the
      <a href="//Shakespeare%27s_Sonnets#wikipedia">
      Shakespeare's sonnets</a> Wikipedia article for more information
      </p>
    </div>
</div>
<div>
<button id="jsstyle"
onclick="js_style()">Style</button>
</div>

<style type="text/css">
  body{
    margin:0;
    background:#96a8c8;
    font-family:Lucida,Helvetica,sans-serif;
    margin:0.5rem 1rem;
}

  .wide-box {
    background:white;
    border-style:solid;
    border-width:1.5px;
    border-color:#071419;
    border-radius:12px;
    box-sizing:border-box
}
</style>
</body>
</html>


<!-- Clicking on the button the font, font size, and color of the paragraph text will be changed. -->

<!-- https://www.w3resource.com/javascript-exercises/javascript-dom-exercises.php -->