Skip to content

C
crscd
Switch branch/tag
Find file
Normal viewHistoryPermalink
padding-fontsize.html 1.49 KB
Newer Older
YazhouChen's avatar
11
82002de4
 
YazhouChen committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 
<!DOCTYPE html>
<html>

  <head>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../build/element-resize-detector.js"></script>
    <style>
        html, body {
            box-sizing: border-box;
        }

        .container {
            font-family: sans-serif;
            font-size: 14px;
            margin: 20px;
            padding: 20px;
            border: solid 1px #e0e0e0;
            background: #e9e9e9;
        }
    </style>
  </head>

  <body>
    <div class="container">
        <p>erd is watching this element</p>
        <button class="fs">bump font size</button> <button class="pd">bump padding</button>
    </div>

    <script>
        var c = document.querySelector('.container');
        var erd = elementResizeDetectorMaker({
            strategy: "scroll"
        });
        erd.listenTo(c, function(el){
          console.log('erd detected container resize');
        });

        $('.fs').on('click', function(e){
          var target = e.currentTarget.parentElement;
          var fs = parseInt(document.defaultView.getComputedStyle(target, null).getPropertyValue('font-size'), 10);
          target.style.fontSize = (fs+=5) + 'px';
        });

        $('.pd').on('click', function(e){
          var target = e.currentTarget.parentElement;
          var pd = parseInt(document.defaultView.getComputedStyle(target, null).getPropertyValue('padding-top'), 10);
          target.style.padding = (pd+=10) + 'px';
        });
    </script>
  </body>
</html>