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">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        .released {
            border-width: 1px;
            border-color: red;
            border-style: dashed;
        }
      
        .pressed {
            border-width: 5px;
            border-color: black;
            border-style: solid;
        }
  </style>
  
</head>
<body>
​
  <img id="logo" class='released' 
       src="https://openhome.cc/Gossip/images/caterpillar_small.jpg">  
​
<script type="text/javascript">
​
    function hasClass(elem, clz) {
        let clzs = elem.className;
        if(!clzs) {
            return false;
        } else if(clzs === clz) {
            return true;
        }
        return clzs.search(`\\b${clz}\\b`) !== -1;
    }
  
    function addClass(elem, clz) {
        if(!hasClass(elem, clz)) {
            if(elem.className) {
                clz = ` ${clz}`;
            }
            elem.className += clz;
        }
    }
  
    function removeClass(elem, clz) {
        elem.className = elem.className.replace(
          new RegExp(`\\b${clz}\\b\\s*`, 'g'), '');
    }
  
    function toggleClass(elem, clz1, clz2) {
        if(hasClass(elem, clz1)) {
            removeClass(elem, clz1);
            addClass(elem, clz2);
        }
        else if(hasClass(elem, clz2)) {
            removeClass(elem, clz2);
            addClass(elem, clz1);
        }
    }
  
    document.getElementById('logo').onclick = function() {
        toggleClass(this, 'released', 'pressed');
    };
​
</script>  
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
JustinSDKpro
0viewers