• Day5------------functionCss


    style只能获取行间样式,如果需要获取所需要元素的当前属性值,

    IE:

      可以使用object. currentStyle.width;

    FF:

      可以使用getComputedStyle(object,false).width;

    创建了函数Css来控制样式提供了UI交互,并完成了参数匹配

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>functionCss</title>
     6 </head>
     7 <style type="text/css">
     8     div{ 700px;height: 400px;background: gray;font-size: 20px;cursor: pointer;}
     9 </style>
    10 <script type="text/javascript">
    11     window.onload=function(){
    12         oDiv=document.getElementsByTagName('div')[0];
    13         oBtn=document.getElementsByTagName('input');
    14         oDiv.innerHTML="If you don't init the value,you get the current value.<br/>or else,you change it.<br/>re:<br/>textbox1:width,height,backgroundColor,fontSize<br/>textbox2:**px,pink,red,#CCC";
    15         function Css(Obj,Attr,Value){
    16             if(oDiv.currentStyle) {
    17                 if(arguments.length==2)    alert(Obj.currentStyle[Attr]);
    18                 else Obj.style[Attr]=Value;                
    19             }
    20             else if(getComputedStyle) {
    21                 if(arguments.length==2)    alert(getComputedStyle(Obj,false)[Attr]);
    22                 else Obj.style[Attr]=Value;                
    23             }
    24         }
    25         oBtn[2].onclick=function(){
    26             if(oBtn[0].value){
    27                 if(oBtn[1].value) Css(oDiv,oBtn[0].value,oBtn[1].value);
    28                 else Css(oDiv,oBtn[0].value);
    29             }            
    30         }
    31     }
    32 </script>
    33 <body>
    34     <div></div>
    35     <input type="text"  placeholder="the attribute to get" />
    36     <input type="text" placeholder="the value to change" />
    37     <input type="button" value="submit">
    38 </body>
    39 </html>
  • 相关阅读:
    002.NFS相关配置项
    001.NFS简介
    002.DNS-BIND简介
    001.DNS原理及配置格式
    002.DHCP配置
    001.DHCP简介
    001.Chrony时间服务器
    博客开篇记载!
    【python-opencv】图像梯度
    【python-opencv】形态转换
  • 原文地址:https://www.cnblogs.com/fleshy/p/4119725.html
Copyright © 2020-2023  润新知