欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 >建站经验 >Js&Ajax > JavaScript设置/读取css函数对象的属性

JavaScript设置/读取css函数对象的属性

2018-08-30 390 收藏 0 赞一个 0 真差劲 0 去评论

JavaScript设置/读取css函数对象的属性,二个参数, 如果第二个参数是对象, 批量设置属性。  

第一个按钮点击事件,两个参数, 第二个参数为字符串, 读取属性值,两个参数, 第二个参数为对象, 属性批量设置。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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 ()
    {
        //两个参数, 第二个参数为字符串, 读取属性值
        alert("width: " + css(oBox, "width") + "\nheight: " + css(oBox, "height") + "\nbackground-color: " + css(oBox, "backgroundColor"))
    };
    //第二个按钮点击事
    aInput[1].onclick = function ()
    {
        //两个参数, 第二个参数为对象, 属性批量设置
        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 ()
    {
        //两个参数, 第二个参数为对象, 属性批量设置
        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截图20180830103825.jpg

QQ截图20180830103837.jpg

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站所有资源(包括模板、素材、软件、字体等)仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论
分享是个好习惯