javascript - 在 Javascript 中获取背景位置的 posX 和 posY

Question

如果我假设背景位置将始终采用以下格式:

0px 0px;或 10px 11px; 所以，*number*px *number*px.

如何在 Javascript 中同时获取 x 位置和 y 位置？

Answer 1

给定以下 HTML:

<div id="demo"></div>

和 CSS:

div {
    height: 500px;
    width: 500px;
    margin: 0 auto;
    background: #fff url(http://placekitten.com/300/300) 50% 50% no-repeat;
}

以下 JavaScript 有效:

var demo = document.getElementById('demo'),
    _tmp = window.getComputedStyle(demo,null).backgroundPosition.trim().split(/\s+/),
    positions = {
        'left' : _tmp[0],
        'top' : _tmp[1]
    };
console.log(positions, positions.left, positions.top);

JS Fiddle demo .

上述方法确实需要支持 window.getComputedStyle()(显然)和 trim()(尽管可以用 replace(/^\s+|\s+$/g,'') 代替)的浏览器).

要独立访问单位和数字，我建议在整个对象中创建其他对象来保存这些数字和单位:

var demo = document.getElementById('demo'),
    _tmp = window.getComputedStyle(demo,null).backgroundPosition.trim().split(/\s+/),
    positions = {
        'left' : _tmp[0],
        'top' : _tmp[1],
        'numbers' : {
            'left' : parseFloat(_tmp[0]),
            'top' : parseFloat(_tmp[1])
        },
        'units' : {
            'left' : _tmp[0].replace(/\d+/,''),
            'top' : _tmp[1].replace(/\d+/,'')
        }
    };
console.log(positions, positions.left, positions.top, positions.numbers.left, positions.numbers.top, positions.units.left, positions.units.top);

JS Fiddle demo .

至于如果没有设置background-position会发生什么？好吧，为什么不尝试使用以下 CSS:

div {
    height: 500px;
    width: 500px;
    margin: 0 auto;
    background-color: #fff;
    background-image: url(http://placekitten.com/300/300);
    background-repeat: no-repeat;
}

在 Chromium 中，您似乎获得了 0% 0% 的默认 background-position(以及相应的数字和单位):JS Fiddle demo .

引用资料:

• JavaScript Regular Expressions .
• String.parseFloat() .
• String.replace() .
• String.split() .
• String.trim() .
• window.getComputedStyle() .