✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

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

Last Updated : Jul 1, 2023

IN - CSS JavaScript | Written & Updated By - Pragati

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.

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

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on change webpage design with a click helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪