ng-style:动态控制样式

最新推荐文章于 2023-12-22 18:28:32 发布
最新推荐文章于 2023-12-22 18:28:32 发布
阅读量452 收藏 1
点赞数
文章标签： angular.js javascript webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23333277/article/details/121680803
版权
这篇博客探讨了如何使用JavaScript动态地控制HTML元素的样式。通过示例代码展示了当`lookDetailData_objX.newListQualificationAB`数组长度为1或2时，将`<h1>`元素的`top`属性设置为`50%`并应用`transform`，否则将其`top`属性设置为`2%`。这展示了JavaScript在前端开发中对页面布局的实时调整能力。
摘要由CSDN通过智能技术生成

html:

<h1 ng-style="myObj"></h1>
 

js:

// 动态控制样式

                        if ($scope.lookDetailData_objX.newListQualificationAB.length == 1 || $scope.lookDetailData_objX.newListQualificationAB.length == 2) {

                            $scope.myObj = {

                                "top": "50%",

                                "transform": "translateY(-50%)",

                            }

                        } else {

                            $scope.myObj = {

                                "top": "2%",

                            }

                        }

GanNaiXing
关注
对angularJs中ng-style动态改变样式的实例讲解
10-17
今天小编就为大家分享一篇对angularJs中ng-style动态改变样式的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ng-chartist：Chartist.js的角度组件
02-01
角度宪章》 演示版 文件 目录 关于 Angular 4+的Chartist组件 安装 纱 # install ng-chartist and chartist ... " src/style.scss " ], 用法 // app.module.ts import { ChartistModule } from 'ng-cha
AngularJS使用ng-style动态改变样式
KHOST的博客
02-12 2931
AngularJS使用ng-style动态改变样式，代码如下：01&lt;!doctype html&gt;02&lt;html lang="en"&gt;03&lt;head&gt;04    &lt;meta charset="UTF-8" /&gt;05    &lt;title&gt;Document&lt;/title&gt;06    &lt;style
AngularJS使用ng-class、ng-style实现动态css样式
qq_25775675的博客
08-05 3264
AngularJS使用ng-class、ng-style实现动态css样式
ng-style
weixin_30469895的博客
10-16 91
ng-style="{'height':'{{rule.ruleContent[0].type=='supplierfile'?'100px':'55px'}}'}" 转载于:https://www.cnblogs.com/zhangshuda/p/7675521.html
AngularJS 指令之 ng-style
weixin_30940783的博客
10-06 190
用途 ng-style 属性用来设置元素的style属性的css值。 用法 <input type="button" value="set color" ng-click="myStyle={color:'red'}"> <input type="button" value="set background" ng-click="myStyle={'back...
ng-waterfall:带有角度的瀑布的简单演示指令
06-07
<div ng-repeat="item in items" style="width: 200px;"> <!-- 内容元素，例如图片或其他自定义模板 --> <img ng-src="{{item.imageUrl}}" alt="{{item.title}}"> ``` **持续优化** 正如作者所述，ng-...
ng-tasks:一般练习有角度的微小任务
05-12
AngularJS允许你动态地添加或移除CSS类，通过`ng-class`或`ng-style`指令实现。这使得根据应用状态改变元素的样式成为可能。 然后，"$http"服务是AngularJS用于进行HTTP请求的工具，它提供了发送GET、POST、PUT、...
angularjs中ng-style动态改变js中的样式
stupider0623的博客
10-26 863
定义和用法 ng-style 指令为 HTML 元素添加 style 属性。 ng-style 属性值必须是对象，表达式返回的也是对象   例子 &lt;body ng-app="myApp" ng-controller="myCtrl"&gt; &lt;h1 ng-style="myObj"&gt;stupider你好!&lt;/h1&gt;&lt;script&gt
ng-style用法
热门推荐
u010552788的专栏
06-24 2万+
我想给ng-style传一个controller里面的变量，折腾了半天，引号不能忘ng-style="{'background-color':'{{markColor}}'}"
ng-style的用法
xuxiaojie2016的博客
07-09 3102
html<table> <tbody> <tr> <td style="padding:50px;border:1px soild red" ng-style="data"> </td> </tr> </tbody> </table> js var a=[{'red': '0','green': '0', 'blue': '0' }, {'red':
Angular使用NgStyle设置动态颜色
cf8833的博客
03-16 1621
Angular使用NgStyle设置动态颜色 step1：Angular 中的 NgStyle 指令，您将能够为 DOM 元素设置样式属性。在NgStyle的帮助下，我们将能够轻松地设置风格。在这里，我们将为其分配对象文字 D:\vue\untitled2901\src\app\app.component.ts import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-root', te
[Angular] 笔记 6：ngStyle
最新发布
学习笔记
12-22 2409
后缀（如 ‘top.px’、‘font-style.em’），值为待求值的表达式，得到的非空值以给定的单位表示，并赋给指定的样式属性。指令接受一个对象作为输入，其中键是 CSS 样式属性，值是对应的样式值。这使得你可以根据组件中的变量值来动态地添加或移除样式。是一个内置的指令，用于动态设置 HTML 元素的样式。它允许你根据组件中的条件或变量值动态地修改元素的样式。设置一个或多个样式属性，用以冒号分隔的键值对指定。是组件中的变量，它们根据不同的值来动态地修改文本的颜色、字体大小和字体样式。
AngularJS ng-class、ng-style
书香水墨
09-02 599
一、 ng-class ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。 ng-class 指令的值可以是字符串，对象，或一个数组。 如果是字符串，多个类名使用空格分隔。 如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。 如果是数组，可以由字符串或对象组合组成，数组...
（四下）ng-class指令，ng-style指令，ng-show/ng-hide指令，ng-if指令等....
action_xing的博客
09-06 962
ng-class指令 给元素添加CSS类 1. 直接绑定值为CSS类名的$scope对象属性 2. 以字符串数组方式选择性添加CSS类 表达式 ? ‘style1’:‘style2’ 3. 通过key/value对象的方式添加多个CSS类 ng-class=”{style1:true,style2:false}”o.startsWith(‘D’); indexOf()
ng-style用于背景图片的样式方法
qq_36423909的博客
08-22 1347
html里： div class="text-center" ng-style='storeDetailMainPictrue'>div> controller里：$scope.PictruePath = Constant.url + $scope.storeDetailMainData.companyInfo[0].LOGO_PATH; $scope.storeDetailMainPict
ng-style和ng-class的应用
diaonanzhen8916的博客
11-07 234
ng-style="{设置样式的条件？‘条件成立时的样式’：‘条件不成立时的样式’}" 例如： ng-style="{color:a>b?red:blue}" 当a>b时颜色为红色；当a<b或a=b；条件不成立时，颜色为蓝色 ng-class="{'条件为true时的class样式':条件=true,'条件为false时的class样式':条件=fa...
angularjs-ng-app,ng-model,ng-class,ng-style,三目,选项卡,$watch,$scope
weixin_34121304的博客
06-21 716
AngularJS：MVx框架，把数据、表现、逻辑分离开方便程序员——避免重复劳动（获取、事件）版本：1.2.x 和 1.3.xng-bind输出（不常用）ng-app范围模板：{{}}，输出1、ng-app=" " 定义angularJS的使用范围；2、ng-init="变量=值;变量='值'" 初始化变量的值，有多个变量时，中间用分号隔开；3、ng-model...
Angular学习1-内置属性型指令之NgStyle、NgClass、NgModel基本使用
青颜的天空的博客
07-17 3211
Angular 属性型指令会监听并修改其它 HTML 元素和组件的行为、Attribute 和 Property。 它们通常被应用在元素上，就好像它们是 HTML 属性一样，因此得名属性型指令。
angular1的ng-style用法
06-10
在 AngularJS 1.x 中，ng-style 指令用于设置 HTML 元素的样式。该指令可以接受一个对象作为参数，对象的属性名为 CSS 样式属性，属性值为该 CSS 样式属性的值。 例如，下面的代码使用 ng-style 指令设置 div 元素的背景颜色和边框样式： ``` <div ng-style="{ 'background-color': myBackgroundColor, 'border': myBorderStyle }">Hello World</div> ``` 在控制器中，我们需要定义 myBackgroundColor 和 myBorderStyle 变量，然后将它们传递给 ng-style 指令。 例如，我们可以在控制器中定义以下代码： ``` $scope.myBackgroundColor = 'red'; $scope.myBorderStyle = '1px solid black'; ``` 这将使 div 元素的背景颜色为红色，边框样式为1像素的黑色实线边框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值