AngularJS—通过输入的值来改变样式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/nongweiyilady/article/details/53563080

先看一下效果:



本次例子实现的是让输入框底下的div,根据用户输入的值来改变颜色。

先看html代码:

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
	<meta charset="UTF-8">
	<title>angular通过输入的值来改变样式</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="../libs/angular.min.js"></script>
</head>
<body>
	<div class="middle">
		你想要的颜色是:<input type="text" ng-model="mystyle">
		<div class="{{mystyle}}">{{mystyle}}</div>
	</div>
</body>
</html>

这个例子的要点是通过 class="{{mystyle}}" 将input的输入值赋给class属性,从而实现改变样式的效果。首先我们得先定义备选的class样式,css代码如下:

@charset "utf-8";

.middle{
	width:300px;
	margin: 20px auto;

}
.middle div{
	margin:5px 0 0 0;
	width: 300px;
	height: 40px;
	border-radius: 5px;
	text-align: center;
	line-height: 40px;
}
.blue{
	background-color: blue;
}
.red{
	background-color: red;
}
.pink{
	background-color: pink;
}
这里我们定义了blue,red,pink三个类样式,当输入相应的值时,通过class="{{mystyle}}" 将input的输入值赋给class属性,从而实现切换样式的效果。

展开阅读全文

没有更多推荐了,返回首页