ch12-03.html 1.96 KB
Newer Older
O'Reilly Media, Inc.'s avatar
O'Reilly Media, Inc. committed
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 71 72 73 74
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>readThis</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div 
{
   width: 600px;
}
#smaller 
{ 
   background-color: #00f; 
   cursor: pointer;
}
#larger 
{
   background-color: #0f0; 
   cursor: pointer;
}
#div1 
{
  font-size: 15px;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  line-height: 18px;
  font-weight: normal;
} 
</style>
<script type="text/javascript">
//<![CDATA[

function makeMore() {
  var div = document.getElementById("div1");
  div.style.letterSpacing="5px";
  div.style.textAlign="justify";
  div.style.textTransform="uppercase";
  div.style.fontSize="25px";
  div.style.fontWeight="900";
  div.style.lineHeight="30px";
}

function makeLess() {
   var div = document.getElementById("div1");
   div.style.fontSize="15px";
   div.style.letterSpacing="normal";
   div.style.textAlign="left";
   div.style.textTransform="none";
   div.style.fontWeight="normal";
   div.style.lineHeight="18px";
}

window.onload=function() {
   document.getElementById('smaller').onclick=makeLess;
   document.getElementById('larger').onclick=makeMore;
}
//]]>
</script>
</head>
<body>
<div id="smaller">
<p>Make smaller</p>
</div>
<div id="larger">
<p>Make larger</p>
</div>
<div id="div1">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent rutrum erat a orci. Ut quis nisi. Curabitur eu nulla. Nullam vulputate tortor. Proin scelerisque. Mauris eleifend odio non enim. Nunc tortor tortor, viverra at, tempor eu, tincidunt in, risus. Duis libero. Aliquam a sapien et justo vehicula volutpat. In at nibh in eros lacinia blandit. Donec nec ligula id nisl convallis convallis. Suspendisse condimentum lacinia ante. Ut et ligula quis magna pharetra rhoncus. Morbi ornare lobortis augue. Nunc convallis semper massa.
</p>
</div>
</body>
</html>