Question

我有一个简单的脚本，用于console.log div的背景图像的xpos，但控制台显示为空白。

这就是我所拥有的：

    var d = document.getElementById('div');
    console.log(d.style.backgroundPosition); //shows a blank line
    console.log(d.style.backgroundPosition.xpos); //undefined (obviously)

我很好奇为什么backgroundPosition会出现空白？

div的CSS是：

 #div{
    background-image: url('test.png');
    background-repeat: no-repeat;
    width:50px;
    height:50px;
    background-position: 0px 0px;
 }

请求的HTML：

<body>   
    <div id="div"></div>
</body>

有什么想法吗？

Answer 1

格式console.log(d.style.backgroundPosition);仅适用于内联设置的样式。要通过样式表设置样式，请使用getComputedStyle：

window.getComputedStyle(d).getPropertyValue("background-position"); // returns 0px 0px

<强> jsFiddle example

如果您只想要X或Y位置，请使用"background-position-x"或"background-position-y"。

如何获得div的背景图像的xpos？

1 个答案: