Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Change The Design Of All Elements In A WebPage Using JavaScript And CSS.

Tuesday, Apr 4, 2017

Tags:- CSS JavaScript


In this tutorial we will create a technique to change the design of all the elements in a webpage without page refresh using JavaScript and CSS.You may also like take screenshot of a webpage using JavaScript.


See Demo
Change Style


To Change The Design of all the Elements in a WebPage using JavaScript and CSS it takes only two steps:-

  1. Make a HTML file and define markup and script to change design
  2. Make a CSS file and define styling for two different design


Step 1.Make a HTML file and define markup and script to change design

We make a HTML file and save it with a name change_design.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="change_design.css">

<script type="text/javascript">
  function style1()
  {
    document.getElementById("container").className = "style1";
  }
  function style2()
  {
    document.getElementById("container").className = "style2";
  }
</script>

</head>

<body>

  <div id="container" class="style1">

    <div id="header">
      <a href="#">SiteName</a>
      <input type="text" id="search" placeholder="Search">
      <input type="submit" id="submit" value="Search">
    </div>
    

    <div id="navigation_bar">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#">Help</a>
    </div>


    <div id="left_column">
      <center>
      <h1>Change The Styling Of Web Page</h1>
      <input type="button" id="change1" value="Change To Style 1" onclick="style1();">
      <input type="button" id="change2" value="Change To Style 2" onclick="style2();">
      </center>
      <br>
      <br>

      <p>
      This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, 
      </p>

      <h2>This is a Sample Text</h2>
      <p>
      This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, 
      </p>

      <h2>This is a Sample Text</h2>
      <p>
      This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, 
      </p>

      <h2>This is a Sample Text</h2>
      <p>
      This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, 
      </p>
    </div>

    <div id="right_column">
      <p>
      This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, 
      </p>
    </div>

    <div id="sec_right_column">
      <p>
      This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, This is a Sample Text, 
      </p>
    </div>

    <div id="footer">
      <center>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#">Help</a>
      </center>
    </div>

  </div>

</body>
</html>

In this step we define all the markups of a webpage and we made two buttons to change the style of a webpage whenever the user clicks on any button respective javascript functions will be called and we change the class name of elements and designing will be applied without page refresh.You may also like print webpage using JavaScript.



Step 2.Make a CSS file and define styling for two different design

We make a CSS file and save it with name change_design.css.

body
{
  margin:0px auto;
  padding:0px;
  width:995px;
  font-family:helvetica;
}
#header
{
  width:100%;
  height:65px;
  padding:10px;
  box-sizing:border-box;
  float:left;
  box-shadow:0px 0px 10px 0px #6E6E6E;
}
#header a
{
  margin:0px;
  padding:0px;
  margin-left:5%;
  font-size:45px;
  text-decoration:none;
  float:left;
}
#header #search
{
  margin:0px;
  padding:0px;
  border-radius:3px 0px 0px 3px;
  border:1px solid #BDBDBD;
  float:left;
  width:20%;
  height:80%;
  margin-left:40%;
  margin-top:5px;
  font-size:17px;
  padding:10px;
}
#header #submit
{
  margin-top:5px;
  border-radius:0px 3px 3px 0px;
  border:none;
  width:7%;
  height:80%;
  font-size:16px;
}
#navigation_bar
{
  clear:both;
  margin-top:3%;
  width:100%;
  height:45px;
  padding:10px;
  box-sizing:border-box;
  float:left;
  box-shadow:0px 0px 5px 0px #6E6E6E;
}
#navigation_bar a
{
  text-decoration:none;
  margin-left:5%;
  font-size:18px;
}
#left_column
{
  clear:both;
  float:left;
  margin-top:4%;
  margin-left:1%;
  padding:10px;
  box-sizing:border-box;
  width:65%;
  min-height:500px;
  box-shadow:0px 0px 1px 0px #6E6E6E;
  border:1px solid #D8D8D8;
  font-size:17px;
}
#right_column, #sec_right_column
{
  float:left;
  margin-top:4%;
  margin-left:5%;
  padding:10px;  
  box-sizing:border-box;
  width:25%;
  min-height:250px;
  box-shadow:0px 0px 1px 0px #6E6E6E;
  border:1px solid #D8D8D8;
  font-size:17px;
}
#footer
{
  clear:both;
  margin-top:3%;
  width:100%;
  height:50px;
  padding:10px;
  box-sizing:border-box;
  float:left;
  box-shadow:0px 0px 5px 0px #6E6E6E;
}
#footer a
{
  margin:5%;
  text-decoration:none;
  font-size:18px;
}
input[type="button"]
{
  width:200px;
  height:40px;
  border:none;
  border-radius:10px;
  background-color:silver;
  color:grey;
  font-size:18px;
}

.style1 #header
{
  background-color:#E6E6E6;
}
.style1 #header a
{
  color:#6E6E6E;
}
.style1 #header #submit
{
  background-color:#6E6E6E;
  color:white;
}
.style1 #navigation_bar
{
  background-color:#E6E6E6;
}
.style1 #navigation_bar a
{
  color:#6E6E6E;
}
.style1 #left_column
{
  background-color:#E6E6E6;
  color:#424242;
}
.style1 #right_column,.style1 #sec_right_column
{
  background-color:#E6E6E6;
  color:#424242;
}
.style1 #footer
{
  background-color:#E6E6E6;
}
.style1 #footer a
{
  color:#6E6E6E;
}

.style2 #header
{
  background-color:#848484;
  box-shadow:inset 0px 0px 50px 10px #585858;
}
.style2 #header a
{
  color:#D8D8D8;
}
.style2 #header #submit
{
  background-color:#A4A4A4;
  color:white;
}
.style2 #navigation_bar
{
  background-color:#848484;
  box-shadow:inset 0px 0px 30px 10px #585858;
}
.style2 #navigation_bar a
{
  color:#D8D8D8;
  font-family: 'WebSymbolsRegular', cursive;
}
.style2 #left_column
{
  background-color:#848484;
  box-shadow:inset 0px 0px 50px 10px #585858;
  color:#D8D8D8;
}
.style2 #right_column,.style2 #sec_right_column
{
  background-color:#848484;
  box-shadow:inset 0px 0px 50px 10px #585858;
  color:#D8D8D8;
}
.style2 #footer
{
  background-color:#848484;
  box-shadow:inset 0px 0px 50px 10px #585858;
}
.style2 #footer a
{
  color:#D8D8D8;
}

Thats all, this is how to change the design of all elements in a webpage using JavaScript and CSS.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH