javascript - How to change body background image by clicking a button in Angular Js? -
hello adding buttons website allow users change background.
i trying make background change angular.
so far have been able change background color couple ways (changing single color , gradient)... however, trying change background-image 1 button , other button trying change background gradient , background-size @ same time.
these steps have done far:
<body ng-style="mystyle">successful:
<input type="button" class="bg stripes" ng-click="mystyle={background: 'red'}">failing:
<input type="button" class="bg numbers" ng-click="mystyle={background-image:'url(../images/count2.png)'}">successful:
<input type="button" class="bg stripes" ng-click="mystyle={background:'linear-gradient(45deg, #379690 25%, #3aa19b 25%, #3aa19b 50%, #379690 50%, #379690 75%, #3aa19b 75%, #3aa19b)'}">failing:
<input type="button" class="bg stripes" ng-click="mystyle={background:'linear-gradient(45deg, #379690 25%, #3aa19b 25%, #3aa19b 50%, #379690 50%, #379690 75%, #3aa19b 75%, #3aa19b)',background-size:'100px 100px'}">
please help! lot!
you have problem syntax. need wrap background-image key in quotes, otherwise it's not valid identifier. works background because having nothing alpha characters, doesn't require quotes.
<input type="button" class="bg numbers" ng-click="mystyle={'background-image': 'url(../images/count2.png)'}"> then work properly:
angular.module('demo', [])<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> <body ng-app="demo" ng-style="mystyle"> <input type="button" class="bg numbers" ng-click="mystyle={'background-image': 'url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_embroidery.png)'}" value="set background"> </body>
Comments
Post a Comment