Knowledge Walls
Praveen Kumar R
Introduction in Basics of JS learning
47 Views
example
	
		<!DOCTYPE html>
	
		<html>
	
		<head>
	
		    <title>changing attribute of id</title>
	
		    <style>
	
		        #container{
	
	
		            display: flex;
	
		            justify-content: space-between;
	
		        }
	
		        #greenCircle{
	
		            height: 300px;
	
		            width: 300px;
	
		            border-radius: 50%;
	
		            background-color: green;
	
		            text-align: center;
	
		            font-size: 30px;
	
		            color: white;
	
		                        
	
		        }
	
		        #redCircle{
	
		            height:300px;
	
		            width: 300px;
	
		            border-radius: 50%;
	
		            background-color: red;
	
		            text-align: center;
	
		            font-size: 30px;
	
		            color: white;
	
		                        
	
		        }
	
		        p{
	
		            padding-top: 100px;
	
		        }
	
		        #redCircle{
	
		            border-radius: 100%
	
		            background-color: red;
	
		        }
	
		        button{
	
		            margin-left: 500px;
	
		            margin-top: 10px;
	
		            font-size: 50px;
	
		            width: 500px;
	
		        }
	
	
		    </style>
	
		</head>
	
		<body>
	
		    <div id="container">
	
		    <div id="greenCircle"> 
	
		        <p>JS can change HTML content!</p>
	
		    </div>
	
		        <div id="redCircle">
	
		        <p>JS can change HTML attributes!</p>
	
		    </div>
	
		    <div id="greenCircle"> 
	
		        <p>JS can change CSS styles!</p>
	
		    </div>
	
		        <div id="redCircle">
	
		        <p>JS can make your web content interactive!</p>
	
		    </div>
	
		    </div>
	
		    <br>
	
		    <br>
	
		    <br>
	
		    <br>
	
		    <button type="button" onclick="document.getElementById('greenCircle').id = 'redCircle'"> Make me Red</button>
	
		    <button type="button" onclick="document.getElementById('redCircle').id = 'greenCircle'"> Make me Green</button>
	
	
		</body>
	
		</html>
Next Topics
Next lessons of current book.
Previous Topics
Previous lessons of current book.
Best Lessons of "JS learning"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details