[css]高手进来 object.style.backgroundPosition只改变一个参数的值?

object.style.backgroundPosition = "80px 0";第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。
 
------------------------------------------------------------------
我想让第二个值保持原来不变,应该怎么做???
如果我这样写 object.style.backgroundPosition = "80px";
它会默认把第二个值改成了50%!!!

解决方案 »

  1.   

    object.style.backgroundPositionX = "80px";
    object.style.backgroundPositionY = "0px";
      

  2.   


    fireFox和360都不支持backgroundPositionX ....好坑爹啊!!
      

  3.   

    http://www.w3school.com.cn/htmldom/prop_style_backgroundposition.asp
    backgroundPosition 是针对两个值 xpos 和ypos的。
      

  4.   

    比如不想改变x
    那么把之前的x值取出来
    object.style.backgroundPosition = x + ' 动态的y';
    这样就没改变x
      

  5.   

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>test</title>
            <style>
             div{
             width: 440px;
             height: 605px;
             border: 1px solid green;
             background-attachment: fixed;
             background-image: url(http://hiphotos.baidu.com/pin/pic/item/242dd42a2834349b11851926c9ea15ce37d3be95.jpg);
             background-repeat: no-repeat;
             }
            </style>
        </head>
        <body>
         <div id="div""></div>
    <script>
    function $(id){
    return document.getElementById(id);
    }
    var utility = {
    "getComputedStyle": function(elem){
    return ("currentStyle" in elem) ? elem.currentStyle : window.getComputedStyle(elem, null);
    },
    "setBackgroundPositionX": function(elem, value){
    var style = this.getComputedStyle(elem),
    posArr;
    if("backgroundPositionX" in style){
    elem.style["backgroundPositionX"] = value;
    }else if("backgroundPosition" in style){
    posArr = style["backgroundPosition"].split(" ");
    elem.style["backgroundPosition"] = value + " " + posArr[1];
    }
    },
    "setBackgroundPositionY": function(){
    var style = this.getComputedStyle(elem),
    posArr;
    if("backgroundPositionX" in style){
    elem.style["backgroundPositionY"] = value;
    }else if("backgroundPosition" in style){
    posArr = style["backgroundPosition"].split(" ");
    elem.style["backgroundPosition"] = posArr[0] + " " + value;
    }
    }
    }
    $("div").onclick = function(){
    utility.setBackgroundPositionX(this, "20px");
    }
    </script>
        </body>
    </html>
      

  6.   


    .ClassificationPanel:hover .Icon1
    {
        background-position:-88px 0px;
    }
    谢谢大家!和同事探讨了一下,上面的代码正是我要的结果!
      

  7.   

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>test</title>
            <style>
                div{
                    width: 440px;
                    height: 605px;
                    border: 1px solid green;
                    background-attachment: fixed;
                    background-image: url(http://hiphotos.baidu.com/pin/pic/item/242dd42a2834349b11851926c9ea15ce37d3be95.jpg);
                    background-repeat: no-repeat;
                }
            </style>
        </head>
        <body>
            <div id="div""></div>
            <script>
                function $(id){
                    return document.getElementById(id);
                }
                var utility = {
                    "getComputedStyle": function(elem){
                        return ("currentStyle" in elem) ? elem.currentStyle : window.getComputedStyle(elem, null);
                    },
                    "setBackgroundPositionX": function(elem, value){
                        var style = this.getComputedStyle(elem),
                            posArr;
                        if("backgroundPositionX" in style){
                            elem.style["backgroundPositionX"] = value;
                        }else if("backgroundPosition" in style){
                            posArr = style["backgroundPosition"].split(" ");
                            elem.style["backgroundPosition"] = value + " " + posArr[1];
                        }
                    },
                    "setBackgroundPositionY": function(elem, value){
                        var style = this.getComputedStyle(elem),
                            posArr;
                        if("backgroundPositionY" in style){
                            elem.style["backgroundPositionY"] = value;
                        }else if("backgroundPosition" in style){
                            posArr = style["backgroundPosition"].split(" ");
                            elem.style["backgroundPosition"] = posArr[0] + " " + value;
                        }
                    }
                }
                $("div").onclick = function(){
                    utility.setBackgroundPositionX(this, "20px");
                }
            </script>
        </body>
    </html>