JavaScript style 样式

1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为JavaScript style 样式。

2、我们就先设置一个div，然后style样式设置div的样式属性。图二就是我们设置好的这个div的样式

3、接下来我们运用script这个标签来设置js的内容，也就是要运用js改变我们用style设置的样式。

4、我们要设置哪个内容就要先获取到哪个元素，正如这个我们要获取到那个div，我们就要通过获取div的id名来获取到这个div元素。

5、然后就要设置box的点击事件。这里不止可以设置点击事件 还有鼠标移入事件，鼠标移出事件等等。这里我们用到的就是点击事件。当然也可以设置移入移出事件。

6、我们可以先改变box的宽度，300+“px”看到这里肯定会有人问为什么中间要用个加号，为什么px要用引号300就没有引号， 这是因为300是数字，px是单位，他们两个属于字符串，所以px要用引号，并且他们两个中间用加号连接起来。图二是点击box后的效果，明显宽度增加了。

7、运用同样的方法我们来设置一下box的高度，图二是宽高都改变的效果。

8、我们也可以改变box的背景颜色，图二是改变了宽、高、背景颜色的效果。

9、其实我们还可以改变很多很多css样式这里就不一一展示了，只需要改变style后面的就行了。

10、这样一个JavaScript style 样式就做好啦！