Knowledge Walls
Praveen Kumar R
Basics
Introduction Finding even and odd days and dates Booklistapp Creating analogue clock
Introduction in Basics of JS learning
1930 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
Next Topics
Next lessons of current book.
Basics of JS learning
Basics of JS learning
Basics of JS learning
Best Lessons of "JS learning"
Top lessons which are viewed more times.
Basics of JS learning
Basics of JS learning
Basics of JS learning
Basics of JS learning
  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