时间:2021-05-28
本文实例讲述了AngularJS使用ng-class动态增减class样式的方法。分享给大家供大家参考,具体如下:
使用ng-class可以实现动态地增减样式:
<!DOCTYPE html><html ng-app="formExample"><head> <meta charset="UTF-8"> <title></title> <script src="../js/angular.js"></script> <script> angular.module('formExample', []) .controller('FormController', ['$scope', function($scope) { }]); </script> <style> .strike { text-decoration: line-through; } .bold { font-weight: bold; } .red { color: red; } </style></head><body><div> <p ng-class="{strike: deleted, bold: important, red: error}">通过映射的方式</p> <input type="checkbox" ng-model="deleted">添加strike样式<br> <input type="checkbox" ng-model="important">添加bold样式<br> <input type="checkbox" ng-model="error">添加错误样式 <hr> <p ng-class="style">使用字符串的方式</p> <input type="text" ng-model="style" placeholder="输入 bold、 strike 或 red"> <hr> <p ng-class="[style1, style2, style3]">使用数组的方式</p> <input ng-model="style1" placeholder="输入: bold, strike 或 red"><br> <input ng-model="style2" placeholder="输入: bold, strike 或 red"><br> <input ng-model="style3" placeholder="输入: bold, strike 或 red"><br> <hr/></div></body></html>更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了AngularJS中ng-class用法。分享给大家供大家参考,具体如下:使用ng-class动态设置元素的类,方法是绑定一个代表所有需要添加的类
首先设定一段Angularjs代码的ng-class:比较容易理解的Angularjsng-class设置样式代码,那我们使用React怎么去实现它呢?首先在s
设置样式和获取样式class也是节点元素的属性,因此获取class和设置class都可以使用attr()方法来完成追加样式直接使用attr()方法设置class
取与设置样式获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下:复制代码代码
本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法。分享给大家供大家参考。具体分析如下:jQuery通过toggleCla