zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    How To Scan QRCode For UWP (4)
    How To Crop Bitmap For UWP
    How To Scan QRCode For UWP (3)
    How To Scan QRCode For UWP (2)
    How To Scan QRCode For UWP (1)
    How to change windows applicatioin's position via Win32 API
    8 Ways to Become a Better Coder
    How to resize or create a thumbnail image from file stream on UWP
    C# winform压缩文件夹带进度条
    MS ACCESS MID函数
  • 原文地址:https://www.cnblogs.com/fleshy/p/4119725.html
Copyright © 2011-2022 走看看