JavaScript Beginner Tutorial: Javascript Css Switcher(changing website theme on onClick)

index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>website design using javascript</title>

<style>
body {
 background:#999999;
}
.wrapper {
 background:#666666;
 margin:auto;
 padding:25px;
 overflow:auto;
}
.dBackgroundBox {
 background-color: #FFFFFF;
}
.styleswitch {
 position:absolute;
 right:5px;
 top: 10px;
 cursor:pointer;
}
.styleswitch p {
 background:#339900;
 color:#0000FF;
 display: inline;
}
header {
 margin:auto;
 padding: 17px;
 background:#000000;
}
.container {
 margin:auto;
 padding:10px;
}
</style>
<script type="text/javascript">
function ModifyBGColor(id, newColor,newFont,newFontcolor)
{

var mElement = document.getElementById(id);
mElement.style.backgroundColor=newColor, 
mElement.style.fontFamily = newFont,
mElement.style.color=newFontcolor;

}
</script>
</head>
<body>
<header>
  
  <div class="styleswitch">
    <table width="50" border="1">
      <tr>
        <td><a onclick="ModifyBGColor('bgModBox','#333333','Impact,Charcoal,sans-serif','#ccc');">
          <p>Theme1</p>
          </a></td>
        <td><a onclick="ModifyBGColor('bgModBox','#003300','Times New Roman','#FFFFFF');">
          <p>Theme2</p>
          </a></td>
        <td><a onclick="ModifyBGColor('bgModBox','#99CCFF','Courier New','#333333');">
          <p>Theme3</p>
          </a></td>
        <td><a onclick="ModifyBGColor('bgModBox','#336666','Algerian','#fff');">
          <p>Theme4</p>
          </a></td>
        <td><a onclick="ModifyBGColor('bgModBox','#CC9933','AngsanaUP','#000033');">
          <p>Theme5</p>
          </a></td>
        <td><a onclick="ModifyBGColor('bgModBox','#3399FF','Gungsuh','#0066FF');">
          <p>Theme6</p>
          </a></td>
      </tr>
    </table>
  </div>
</header>

<div class="wrapper" id="bgModBox">
  <div class="container">
    <h2>JavaScript</h2>
    <p>JavaScript, also known as ECMAScript (the untrademarked name used for the standard), is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It is also used in server-side network programming with runtime environments such as Node.js, game development and the creation of desktop and mobile applications.
      
      JavaScript is classified as a prototype-based scripting language with dynamic typing and first-class functions. This mix of features makes it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.
      
      Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics. The syntax of JavaScript is actually derived from C, while the semantics and design are influenced by the Self and Scheme programming languages.
      
      JavaScript is also used in environments that aren't web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side web applications. On the client side, JavaScript has been traditionally implemented as an interpreted language, but more recent browsers perform just-in-time compilation.
      
      JavaScript has been standardized in the ECMAScript language specification.</p>
  </div>
</div>
</body>
</html>

Monday, 11 May 2015

Javascript Css Switcher(changing website theme on onClick)

index.html

No comments:

Post a Comment