如何通过单击Angular Js中的按钮来更改身体背景图像

How to change body background image by clicking a button in Angular Js?

本文关键字：图像 背景 按钮 单击 何通过 Angular Js      更新时间：2023-09-26

您好，我正在向我的网站添加允许用户更改背景的按钮。

我正在尝试使用角度进行背景更改。

到目前为止，我已经成功地通过几种方式更改背景颜色（更改为单一颜色和渐变）......但是，我正在尝试使用一个按钮更改背景图像，另一个按钮我正在尝试同时更改背景渐变和背景大小。

这些是我到目前为止完成的步骤：

  1. <body ng-style="myStyle">

    • 成功：<input type="button" class="bg stripes" ng-click="myStyle={background: 'red'}">

    • 失败：<input type="button" class="bg numbers" ng-click="myStyle={background-image:'url(../images/count2.png)'}">

    • 成功：<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)'}">

    • 失败：<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'}">

请帮忙！多谢！

语法有问题。您需要将background-image键括在引号中，否则它不是有效的标识符。它适用于background，因为只有字母字符，它不需要引号。

<input type="button" class="bg numbers" ng-click="myStyle={'background-image': 'url(../images/count2.png)'}">

然后它将正常工作：

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>

您不必每次都重新定义myStyle对象。

在您的 ng 点击中，您可以 

ng-click="myStyle.background='...';myStyle.backgroundSize='...'"

你可以摆弄这个小提琴。

相关文章：