通过javascript更改html DOM没有响应

Question

I am changing the background of a div with a function. The following is my html code:

$scope.Background = 'img/seg5en.png';
document.getElementById("Bstyle").style.background = "url("+$scope.Background+") no-repeat center fixed;";           
console.log(document.getElementById("Bstyle").style.background);
console.log("url("+$scope.Background+") no-repeat center fixed;");

Originally, $scope.Background is equal to " img/bg.png " which is specified on top of my document. The first console.log prints that the value of style.background as " img/bg.png ".

However, the second console.log prints: url(img/seg5en.png) no-repeat center fixed .

I do not understand why my html page does not update though.

Answer 1

Please change DOM using angularised way

Use ng-style to change style of element from JavaScript.

In angular you can assign value to $scope variable and it can be access to your view.

Here is demo for resolve your issue

 function ChangeBackground($scope) { $scope.Background = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdNIsxlrqB0Bqy-qmamo6tt9fdqqL9p43Bf5oy11xt0UuAa9vAILYjMX7_'; $scope.changeImage = function(){ $scope.Background ='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ2I2AW0JI-scAY0Phe321d1Yi8UHbFhsIk8OXTbpfEfaNf9F4V9lt60rs'; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-controller="ChangeBackground"> <div ng-style="{'background': 'url(' + Background + ')'}" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor mi non consequat varius. Curabitur libero tellus, placerat in metus nec, porttitor facilisis mi. Vivamus nec mattis felis. Cras mattis in mi sed feugiat. Sed ut hendrerit nisi, at tincidunt nibh. Donec vel malesuada orci. Nunc auctor tortor in mi consectetur gravida. Phasellus eleifend erat lectus, convallis tincidunt nisi euismod et. Donec a ornare eros, et eleifend magna. Phasellus viverra pellentesque metus, in lacinia tortor egestas nec. Suspendisse luctus dolor sit amet nisi interdum, nec commodo orci consectetur. Phasellus pretium vulputate viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <input type="button" value="Change Background" ng-click="changeImage()"/> </div>