Function to change font-size of page content

I’m writing a function in my options.html controller to change text font-size, it works fine, but i’ve got one issue, i’m changing font-size, than i’m going back to previous page, and in that page font-size is already changed, but when i’m back to the my options.html font-size is default, if i’m going back to previous page again, font-size is still changed, every time when i’m return to my options.html fon’t size there is default, how can i overwrite default font-size by changed font-size?

here is my function:

  var range = document.getElementById('range');
  $scope.currentSize = range.value; 

      range.addEventListener('change', function() {
        // ng-bind, current value
        var newSize = this.value;
        angular.element(document.querySelectorAll('.my-label, .my-save-font, .my-p-font, .my-list h2')).css('font-size', newSize + 'px');
      }, false);
    }, 20);

my html element:

                      <div class="item range range-energized">
			  <span class="smallA">A</span>
			  <input id="range" type="range" min="10" max="20" ng-value='currentSize'>
			  <span class="bigA">A</span>

How can i change $scope.currentSize variable in this function, to store new size in it?

Hello @Wahtel,

I did this pen based on your issue, have a look at it. Does it resolves your problem?

Good luck!

1 Like

@juliosampaio thanks for your attention, but I came to the decision, that i should to abandon from idea, to use querySelectorAll.css(), and try to dynamically change style propertie.
But anyway thanks for your example)

Thanks for your your code tha was interesting and helpful.