javascript 获取样式和修改样式的方法

获取行间样式

在说这个之前先重点说一个对象 arguments。这个对象的作用是能把 javascript函数内的所有参数都读取得到,也就是说javascript把传进函数的参数都存储到了这个对象里了。
例如:

function plus(){
    var res=0;  //这是定义结果
    //arguments.length  获取传进参数的数量(类似于获取数组长度)   
    for(var i=0;i<arguments.length;i++){
        res+=arguments[i];  //累加每一个传进的参数
    }
    return res;
}

window.onload=function(){

alert(plus(8,12,3,1,2));

}

这样随便传几个数字进去通过 arguments 对象获取到每一个参数,然后循环相加得出的结果就是:

这里写图片描述

这个对象我感觉很有用所以就特别声明多说了几句,希望对你也有用。
接下来进入正题:获取和修改css行间样式

/*
obj   标签id
name  样式名
value 样式值
*/
function getStylecss(obj,name,value){
//如果有两个参数传进来则返回该对象的name值。表示获取值,否则就是设置值
    if(arguments.length==2){
        return obj.style[name];
    }else{
        obj.style[name]=value;
    }

}

知道了 arguments 函数的作用了之后有一定相信javascript基础的朋友都能看得出来这个函数的基本原理是什么。如果不知道也没关系下面我准备了一个案例。相信看完这个小案例了之后你一定就知道是怎么回事了。

<!DOCTYPE html>
<html>
<head>
<script>
function getStylecss(obj,name,value){
    if(arguments.length==2){
        return obj.style[name];
    }else{
        obj.style[name]=value;
    }

}
window.onload=function(){
//获取id
var oDiv=document.getElementById('div1');
//获取背景颜色
//alert(getStylecss(oDiv,'background'));
//设置背景颜色
getStylecss(oDiv,'background',blue);
}
</script>
</head>
<body>

<div id='div1' style="width:200px;height:200px;background:red;">

</body>
</html>

结果就是:
这里写图片描述

这个案例很简单,只要拿回去运行一下就差不多知道怎么回事了。

猜你喜欢

转载自blog.csdn.net/u012600104/article/details/79034272