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>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="currentwidth">#image1 Width before setting attribute: </div>
  <img id="image1" data-width />
  <div id="currentwidth2">#image2 Width before setting attribute: </div>
  <img id="image2" data-width="100" width=100 />
  <div id="currentwidth3">#image3 Width before setting attribute: </div>
  <img id="image3" data-width="100" width=2 />
  
</body>
</html>
 
[data-width]{
  height: 100px;
  border: 1px solid red;
}
 
window.onload = function() {
  $('#image1').attr( 'width', 
                   function(elementIndex,currentValue) {
                       var cw = $('#currentwidth'),
                           changed = (+currentValue || 100)-50;
                       cw.html(cw.html() + currentValue +
                               '<br>after setting: ' + changed);
                       return changed;
                   } 
              );
  $('#image2').attr( 'width', 
                   function(elementIndex,currentValue) {
                       var cw = $('#currentwidth2'),
                           changed = (+currentValue || 100)+50;
                       cw.html(cw.html() + currentValue +
                               '<br>after setting: ' + changed);
                       return changed;
                   } 
              );
  $('#image3').attr( 'width', 
                   function(elementIndex,currentValue) {
                       var cw = $('#currentwidth3'),
                           changed = currentValue+50;
                       cw.html(cw.html() + currentValue +
                               '<br>after setting (no boxing!): ' + changed);
                       return changed;
                   } 
              );
  };
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers