选择下拉列表的颜色，背景颜色跟着改变

最新推荐文章于 2021-06-03 02:02:50 发布

天生犯二

最新推荐文章于 2021-06-03 02:02:50 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css

本文链接：https://blog.youkuaiyun.com/qq_40040163/article/details/78265490

html/css 专栏收录该内容

11 篇文章

订阅专栏

本文展示了一个使用AngularJS实现的简单示例，通过下拉菜单选择不同的背景颜色应用于页面中的一个区块。此示例利用了AngularJS的双向数据绑定特性及ngClass指令来动态改变元素的CSS类。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <style>
        .sky {
            background-color: lightblue;
        }

        .tomato {
            background-color: coral;
        }
    </style>
    <script>

    </script>
</head>
<body ng-app="">
<p>选择一个类:</p>

<select ng-model="world">
    <option value="sky">天空色</option>
    <option value="tomato">番茄色</option>
</select>

<div ng-class="world">
    <h1>Hello World!</h1>
</div>
</body>
</html>