JavaScript设定/载入css涵数目标的特性

2021-03-01 08:54 admin
热烈欢迎您赶到懒之才-网站站长的共享服务平台! 学好偷懒,并懒出国界是提升工作中高效率最合理的方式!

JavaScript设定/载入css涵数目标的特性,二个主要参数, 假如第二个主要参数是目标, 大批量设定特性。

第一个按键点一下恶性事件,2个主要参数, 第二个主要参数为标识符串, 载入特性值,2个主要参数, 第二个主要参数为目标, 特性大批量设定。

编码以下:

 !DOCTYPE html PUBLIC  -//W3C//DTD XHTML 1.0 Transitional//EN   TR/xhtml1/DTD/xhtml1-transitional.dtd 
 html xmlns= 1999/xhtml 
 head 
 meta http-equiv= Content-Type  content= text/html; charset=utf-8  / 
 title css涵数——设定/载入目标的特性 /title 
 style  
div{width:400px;height:200px;background:#fef4eb;border:1px solid #f60;margin:0 auto;}
input{border:0;color:#fff;cursor:pointer;font-weight:700;background:#f60;padding:2px 4px;margin:10px 0 0 10px;}
 /style 
 script type= text/javascript  
function css(obj, attr, value)
 switch (arguments.length)
 {
 case 2:
 if(typeof arguments[1] ==  object )
 { //二个主要参数, 假如第二个主要参数是目标, 大批量设定特性
 for (var i in attr)obj.style[i] = attr[i]
 }
 else
 { //二个主要参数, 假如第二个主要参数是标识符串, 载入特性值
 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
 }
 break;
 case 3:
 //三个主要参数, 单一设定特性
 obj.style[attr] = value;
 break;
 default:
 alert( 主要参数不正确! )
 }
window.onload = function ()
 var oBox = document.getElementById( box 
 var aInput = oBox.getElementsByTagName( input 
 
 //第一个按键点一下恶性事件
 aInput[0].onclick = function ()
 {
 //2个主要参数, 第二个主要参数为标识符串, 载入特性值
 alert( width:   + css(oBox,  width ) +  \nheight:   + css(oBox,  height ) +  \nbackground-color:   + css(oBox,  backgroundColor ))
 };
 //第二个按键点一下事
 aInput[1].onclick = function ()
 {
 //2个主要参数, 第二个主要参数为目标, 特性大批量设定
 css(oBox, {width:  330px , height:  100px , borderColor:  #0084ff , backgroundColor:  #eff8ff });
 //三个主要参数, 特性单一设定
 for (i = 0; i   aInput.length; i++) css(aInput[i],  backgroundColor ,  #0084ff )
 }
 //第三个按键点一下恶性事件
 aInput[2].onclick = function ()
 {
 //2个主要参数, 第二个主要参数为目标, 特性大批量设定
 css(oBox, {width:  400px , height:  200px , borderColor:  #f60 , backgroundColor:  #fef4eb });
 //三个主要参数, 特性单一设定
 for (i = 0; i   aInput.length; i++) css(aInput[i],  backgroundColor ,  #f60 ) 
 }
 /script 
 /head 
 body 
 div id= box 
  input type= button  value= Get Style  / input type= button  value= Set Style  / input type= button  value= Default Style  / 
 /div 
 /body 
 /html 

实际效果如图所示:

QQ截图205.jpg

QQ截图207.jpg


一、强烈推荐应用迅雷资源或快车等多段程免费下载手机软件免费下载本网站資源。

二、未登陆vip会员没法免费下载,登陆后可得到大量便捷作用,若未申请注册,请先申请注册。

三、假如网络服务器暂未能免费下载请稍后再试!一直不可以免费下载,请点我出错 ,感谢协作!

四、本网站全部資源(包含模版、素材图片、手机软件、字体样式等)仅作学习培训与参照,请勿用以商业服务主要用途,不然造成的一切不良影响将由您自身担负!

五、若有别的难题,请加网站制作沟通交流群(点一下这儿查询沟通交流群 )开展沟通交流。

六、如需转截本网站資源,请标明转截来源于并附加连接

七、本网站一部分資源为数据加密缩小文档,统一缓解压力登陆密码为: