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 样式就做好啦!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐