JS小Demo实战之通过获取文本框的输入值来改变div的类型

最新推荐文章于 2023-03-21 21:31:37 发布

杨小事er

最新推荐文章于 2023-03-21 21:31:37 发布

阅读量3.3k

点赞数

分类专栏： JS实例文章标签： web前端 javascript

本文链接：https://blog.csdn.net/qq_25936689/article/details/50184895

版权

新手从仿做一个angular.js的简单demo（可以通过改变文本输入框的value来改变div的class值）中得到的一些收获。

摘要由CSDN通过智能技术生成

最近开始学习angular.js，课程里有一个demo很好玩，我就想试着用原生js写一下。

这个demo大致是这样的，有一个文本输入框，文本框下面是一个div，

你可以在文本框里输入标签的单词，然后通过外联的foundation.css文件就可以把这个div改变成标签的样子。

就变成了或者

而且在输入的时候，下面的div还会实时的改变文字

。

这个demo用angular.js实现起来很简单，但是我发现用原生js实现起来却不是那么容易的事情。

一开始我以为无非就是可以用getElementById获取到input和div，然后在获取到input的value，把这个value值赋值给div的class作文class的名称，再改变div的innerHTML值就大功告成。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/fo

关注

专栏目录