JS传参及动态修改页面布�

一个关于射流研究…传参及动态修改页面布局的简单小例子。

效果图：

HTML:

！DOCTYPE HTMl HTMl head meta charset=' utf-8 '/title/title link rel='样式表href='css/style.css' rel='外部no follow/head body div id=' button ' h1请为下面的差异设置样式：/h1div点击设置/div/div div id=' set ' div class=' set 1 ' span请选择背景色：/spanspan onclick='cl '(红色)红/spanspan onclick='cl('黄色)黄/spanspan onclick='cl '(蓝色)蓝/span/div class=' set 2 ' span请选择宽(px):/span span onclick=' wd(200)' 200/span span onclick=' wd(300)' 300/span span onclick=' wd(400)' 400/span/div class=' set 2 ' span请选择高(px):/span span onclick=HD(200)' 200/span span onclick=' HD(300)' 300/span span onclick=' HD(400)' 400/span/div span class=' BTN ' onclick=' reset()'恢复/span class=' BTN ' onclick=' apply()'确定/span /div div id='box'/div脚本类型=' text/JAVAScript ' src=' http : js/js。 js '/脚本/正文/html CSS :

/*前：26%；左侧：40%;*/# box { width :100 px；高度： 100像素；border:4px黑色固体；页边距-顶部：100像素；} # button div {背景：红色；宽度宽度：100像素高度：40 pxfloat:left颜色：白色；文本对齐：中心；线高： 40px光标：指针；} #设置{宽度：20%；高：28%;border:15px rgb(156，148，156)实心；背景：白色；绝对位置：top :300 pxleft 3360300 pxbox-shadow : 0 8px灰色；display : none } # set div { height : 40pxmargin : 20px自动；} # set div span { width:45px高度：40 px显示：块；float:left边距-左侧：10 px颜色：白色；线高：40 px文本对齐：居中；光标：指针指针；} #设置div span :悬停{边框：1 px黑色实心} # set div span:nth第(1)种类型{横向：自动颜色：黑色；font:18px/40px '微软雅黑；保证金-左侧：12%;border : none cursor : auto }/*第：个类型()表示同级同容器下该种类型的第几个标签括号内的数字即指第几个，从一开始*/# set。设置1 span : th的-type(2){背景： RGB(230，46，0)；边距-左侧：5 px} #设置。设置1 span : of-type(2):悬停{背景：红色} #设置。set 1 span : th of-type(3){ background : RGB(239，189，0)} # set。设置1跨度：第三类型(3):悬停{背景：黄色} #设置。第1组跨度：(类型3 ).color:rgb(136，140，143)} # set。设置2 span : th的-type(1):悬停{背景：白色；} #设置。设置2 span : th的-type(2){背景： RGB(239，239，239)；边距-左侧：5 px} #设置。set 2 span : th of-type(3){背景： RGB(239，239，239)} # set。set 2 span : th of-type(4){背景： RGB(239，239，239)} # set。设置2跨度：悬停{背景： RGB(239，148，0)} #设置.btn { width:60px高度：30 px背景技术： # 002952;颜色：白色；显示：块；float:left边距-左侧：10 px页边距-top :10 px；文本对齐：居中；线高：30 px光标：指针指针；} #设置span第：个-type(1){ margin-left :32%；}JS:

onload=function(){ //加载完毕给差异添加点击事件，可以不这么做，像下面的重置/应用一样建立一个函数并在该差异上写上Onclick点击事件调用函数即可var BTN=文档。getelementbyid(' button ').getElementsByTagName(' div ')；btn[0].onclick=function(){ document。getelementbyid(' set ')。风格。display=' block} } var box=文档。getelementbyid(' box ')；//建立全局变量获取差异对象函数wd(x){ //改变宽度盒子。风格。宽度=x ' px}功能高清(x){ //改变高度盒子。风格。高度=x ' px}函数cl(x){ //改变颜色盒子。风格。背景=x；}函数apply(){ document。getelementbyid(' set ')。风格。显示='无'；}功能重置(){ //恢复差异原来的布局盒子。风格。宽度=100 ' px盒子。风格。高度=100 ' px盒子。风格。背景='白色'；}以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！