实现能动态的改变css样式-场景

Alan_阿兰

于 2017-05-02 16:06:38 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：场景管理

本文链接：https://blog.youkuaiyun.com/sixteen_cicle/article/details/71082309

场景管理专栏收录该内容

16 篇文章

订阅专栏

本文介绍了三种在不同框架下实现动态更改CSS样式的有效方法：利用Angular的数据双向绑定、使用对象数组进行状态管理以及借助jQuery直接操作DOM元素。这些技术能够帮助开发者根据不同条件灵活地调整网页元素的表现形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求一：

比如某个表达元素在不同的状态需要展现不同的样子

确定前

确定后

错误提示

实现能动态的改变css属性值

angular方法
第一种：通过数据的双向绑定（不推荐）

js:
$scope.className ="active";

html:
class="{{className}}"

第二种：通过对象数组

$scope.css{
    usernameClass:'',logon_item/''
    passwordClass:''
}

html:

ng-class="css.usernameClass"

第三种：通过key/value

jquery方法：

$("p").css({"background-color":"yellow","font-size":"200%"});
var p_class = $("p").attr("class"); //获取p元素的class
$("p").attr("'class", "high"); //设置p元素的class为 "high"
$("#nm_p").addClass("another"); // 追加样式
$("p").removeClass("high"); //移除p元素中值为"high"的class