改变样式

改变样式

这次讲的内容是怎样用js去改变一个div的样式。首先先看一下框架HTML的部分，请看以下截图。

结构还挺简单的，接下来看一下对应的css部分。

这部分的css也是很简单的，但是我给了一个“transition”的属性，这样的话改点样式的时候速度可以慢一点。接下来看一下对应的初始效果。

初始的效果大概就是这样，我们要做到的是我们在输入框内输入一个数字或者背景颜色摁下“改变样式”的按钮时上的框会根据你输入的内容进行改变。接下来看一下就是的部分。请看接下来的截图。

首先我们来看绿色线上的单词，它就是我们给“改变样式”按钮的点击事件可以查看第一张截图。接下来就是获取要改变样式的那个div，说到这里就要说一下紫色线上的单词了，这个单词它是可以根据类的名字直接获取到这个元素的，这样就不需要用到ID名了。接下去就是要获取输入框了，这个就是根据ID名来获取的，但是要说一下蓝色线上的单词，这个单词它是返回或设置被选元素的值，这个是关键，因为这样的的话我们在输入框里填入新的值div的样式才会改变。接下来就是要改变那个div的样式了，黄色线上面的单词就是原来的样式，而红色线上面的单词就是填入新的值的样式。接下来看一下改变的效果，请看截图。