使用JavaScript检测背景图片的上边距

Question

This is how I detect the top margin of a div and increase/decrease it:

var oldm = $("#bdi").css("margin-top").replace("px", "");

var addm = 1;

$("#bdi").css({
'margin-top': '-='+addm+'px'
})

But I need to do the same with background position.

1. detect the actual top position of a background image
2. increase/decrease the top margin of a background image

For example:

background-position: center 5px;

How do I detect "5px" and increase/decrease it?

Thanks

Answer 1

You can get it using background-position-y like this :

var bgPositionY = ($("#bdi").css('background-position-y'))
var addPos = 5;
$("#bdi").css({
'background-position-y': '-='+addPos+'px'
})

https://jsfiddle.net/IA7medd/aLkok1n4/

Answer 2

You don't need jQuery for this...

var el = document.getElementById('bdi'),
    currentYPosition = getComputedStyle(el)['backgroundPositionY'],
    increment = 1,
    newYPosition = 'calc(' + currentYPosition + ' + ' + increment + 'px)';

// Set new backgroundPositionY
el.style.backgroundPositionY = newYPosition;

The use of calc() above ensures the value is properly incremented, even if a percentage position value is used.

Answer 3

如果您使用的是jQuery，最简单的选择是使用内联增量表示法：

$("#bdi").css('background-position-y', '+=5px');

Answer 4

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. Link

For example like this

$("div").css("background-position-x", "+=10px");
$("div").css("background-position-Y", "-=10px");

If you want to do other operation on css value use this

$("div").css("background-position-x", function(index) {
    return index * 10;
});

You can see demo at bottom

 $("#increaseX").click(function(){ $("#image").css("background-position-x", "+=10px"); }); $("#decreaseX").click(function(){ $("#image").css("background-position-x", "-=10px"); }); $("#increaseY").click(function(){ $("#image").css("background-position-y", "+=10px"); }); $("#decreaseY").click(function(){ $("#image").css("background-position-y", "-=10px"); }); 

 #image { width: 100px; height: 100px; background-image: url("https://assets.servedby-buysellads.com/p/manage/asset/id/28536"); background-position: 0px 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="image"></div> <button id="increaseX">increaseX</button> <button id="decreaseX">decreaseX</button> <br /> <button id="increaseY">increaseY</button> <button id="decreaseY">decreaseY</button> 

Firefox doesn't support background-position-x and background-position-y . If you want to do your target work in firefox, see jsfiddle

You can