今天我们来做一个改变方块样式的案例,就是在文本框里输入需要改变的属性值,后点击运行而改变方块样式。
- 代码
- HTML部分
首先需要设置方块要改变的属性值(文字和输入框),点击改变的按钮,需要改变的方块,并且为它们设置好所需的类名,id名,这样我们的第一步就完成的差不多了,接下来我们将对我们所写的内容添加样式;
- CSS部分
为了让整个页面变的好看可以根据自己需求加上不同的图片当作壁纸,然后我们要开始对我们的输入框(例如方块要改变的属性值,点击改变的按钮)、方块的样式进行调整使其更加美观
- JavaScript部分
- 来到JS部分,前面我们已经把按钮,文本框还有方块设置好了id,现在我们要做的就是把它们一个一个绑定,首先绑定按钮的id并且为它添加一个点击事件,再获取五个输入框并且在其后加上“.value”,加上“.value”是为了获取文本框里的内容属性,然后再获取到我们要改变的方块“box”,最后将文本框里的内容属性与方块需改变的部分进行绑定,就如box.style.width = “...”绑定宽度一样。
总结;
这个案例用到了,input,label这些文本框类型的代码,且在CSS样式中使用了很多的height,width,位移等来进行样式调整,JS部分使用了一个点击事件,其中获取文本框后面所加的“.value”是为了获取文本框里的内容属性并且更好使用,有些地方可能讲的不是太对,请多多包涵谅解。