如何用棱角.js更改元素的颜色

How to change color of elements with angular.js

本文关键字：元素 颜色 何用棱 js      更新时间：2023-09-26

如何使用带有角度 js 的 css 类更改元素的颜色。我在网上阅读了一些东西，但不知何故我错过了一些东西，因为它对我不起作用。

我的js小提琴：

http://jsfiddle.net/ynko3ct3/1/

法典：

<p class="change-background-color">No difference!</p>
 <form>
 <div class="form-group">
      <label>Header color</label>
      <input class="form-control" type="text"  ng-model="Headercolor" placeholder="#f00">
    </div>
    </form>

.css

.change-background-color { background-color: {{Headercolor}}; }

请检查更新的 fddle： http://jsfiddle.net/ynko3ct3/2/

你应该使用 ng-style 指令来更改 HTML 中的样式属性，而不是像这样在 CSS 中

： 
<p class="change-background-color" ng-style="{'background-color':Headercolor}">
  No difference!
</p>

您也可以查看此链接： 普朗克演示

需要在<p></p>标签中使用ng-style="yourVariableName"，并在输入字段更改时调用函数来设置<p></p>标签的输入字段颜色。

在 html 中：

<p ng-style="backColor">this is a simple background color seter</p>
<input ng-model="headerColor" ng-change="setColor()">

在控制器中：

$scope.headerColor = '#cd0a0a';
  $scope.backColor = {'background-color':$scope.headerColor};
  $scope.setColor = function() {
    $scope.backColor = {'background-color':$scope.headerColor};
  };
相关文章：