gpt4 book ai didi

javascript - 如何通过单击 Angular Js 中的按钮来更改正文背景图像?

转载 作者:太空宇宙 更新时间:2023-11-04 16:11:03 27 4
gpt4 key购买 nike

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

我正在尝试使用 Angular 更改背景。

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

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

  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>

关于javascript - 如何通过单击 Angular Js 中的按钮来更改正文背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34917608/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com