Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="box" style="color: white; padding: 20px; margin: auto; background: #ccc; width: 200px; min-height: 200px;"></div>
    
  <button id="btn1">CHANGE BG COLOR</button>
​
  <button id="btn2">REMOVE BOX MARGINS</button>
​
  <button id="btn3">DISPLAY PADDING VALUE</button>
​
</body>
</html>
 
body {
  font-family: Arial, sans-serif;
  padding: 30px;
}
​
div {
  text-align: center;
  font-size: 60px;
}
​
button, output {
  display: block;
  margin: 30px auto;
  text-align: center;
}
 
var box = document.getElementById('box'),
    boxStyle = document.getElementById('box').style,
    btn1 = document.getElementById('btn1'),
    btn2 = document.getElementById('btn2'),
    btn3 = document.getElementById('btn3');
​
btn1.addEventListener('click', function () { 
  boxStyle.setProperty('background-color', 'blue');
}, false);
​
btn2.addEventListener('click', function () { 
  boxStyle.removeProperty('margin');
}, false);
​
btn3.addEventListener('click', function () { 
  box.innerHTML = boxStyle.getPropertyValue('padding-top');
}, false);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ImpressiveWebspro
0viewers