Сдвиг div'a через текстовое поле
 

Добрый вечер, подскажите мне пожалуйста, новичку.
Есть такой скрипт
document.getElementById('Kard').style.top='123px'
document.getElementById('Kard').style.left='313px'
он смещает определенный див, так вот как сделать так что бы вместо этих значений top='123px' left='313px' , он брал данные из текстовых полей которые у меня есть. Зарание спасибо.

// сохраняем результат работы функции getElementById в переменную.
var element = document.getElementById('Kard');
// список свойств, с которыми будем работать. Можно и массивом, но объектом удобнее.
var properties = {top: 1, left: 1};
for (var property in properties) {
    var input = document.getElementById(property + '-input');
    element.style[property] = input.value + 'px';
}

в документе должны быть элементы:

<input id="top-input" placeholder="значение top" />
<input id="left-input" placeholder="значение left" />

Подскажите еще пожалуйста, есть у меня вот такой style.css

body 
{ 
 background-color: green;
 }
 
.A
{
position: absolute;
background: url("cards.png");
background-position:-197px -572px ;
top: 300px;
left: 750px;
width:98px ;
height: 143px;
}

Т.е. зеленый фон, и в нем окошко, через которые видно кусочек бэкграунда, мне надо сделать так что бы при нажатии на этот див
<div class="A">
</div>
менял позицию бэкграунд, и этих позиций должно быть несколько (которые я им укажу)

В JavaScript положение фона меняется через свойство .style.backgroundPosition. Нажатие на див - это

element.onclick = function(){ 
    /* действия по клику */
}

спасибо вам огромное.