保埃科技网
您的当前位置:首页可变参数css函数获取非行间样式的方法

可变参数css函数获取非行间样式的方法

来源:保埃科技网


本文主要和大家分享可变参数css函数获取非行间样式的方法,希望能帮助到大家。

1、可变参数

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title>可变参数</title>
 </head>
 <script>
 window.onload= function(){
 function sum1(){
 var sum=0; for(var i=0;i<arguments.length;i++){
 sum+=arguments[i];
 } return sum;
 }
 alert(sum1(1,2,3,4,5,6,7));
 } </script>
 <body>

 </body></html>

2、css函数

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title>css函数</title>
 <script>
 window.onload=function(){
 //css1()和css2()是两个函数,但是功能是相同的。为了防止arguments出现太多容易混乱。所以给他们起一个名字
 function css1(){
 if(arguments.length==2){ //记得填写return,这样外部才能接收
 return arguments[0].style[arguments[1]];
 }else{ arguments[0].style[arguments[1]]=arguments[2];
 }
 } function css2(obj,name,value){
 if(arguments.length==2){ //记得填写return,这样外部才能接收
 return obj.style[name];
 }else{
 obj.style[name]=value;
 }
 } var op = document.getElementById('op');
 alert(css2(op,'width')); //里面使用的是字符串
 css2(op,'background','green'); 
 } </script>
 </head>
 <body>
 <p id='op' style="width: 100px;height: 100px;background: red;">

 </p>
 </body></html>

3、获取非行间样式
使用window.onload()时,里面不能嵌套别的函数,但是可以调用别的函数。
获取非行间样式有两种方法。
一是:currentStyle使用方法和style相同,但是只有IE兼容,
二是:getComputedStyle,使用方法是getComputedStyle(op,false).width;其中第一个参数是要获取的对象的名称,第二个参数是一个随意的值。
取行间样式时,不能够使用getComputedStyle来取复合样式,比如background,但是如果想要取背景颜色,可以使用backgroundcolor

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title>获取非行间样式</title>
 <style>
 #p1{width: 300px; height: 200px; background: red;}
 </style>
 <script>
 window.onload=function(){ 
 huoqu();
 } function huoqu(){
 var op = document.getElementById('p1'); if(op.currentStyle){
 alert(op.currentStyle.width);
 }else{
 alert(getComputedStyle(op,false).width); 
 }

 } </script>
 </head>
 <body>
 <p id='p1'> 
 </p>
 </body> </html>
显示全文