Przypisanie element.style.left do zmiennej

Question

Stawiam pierwsze kroki w JS. Piszę małą gierkę, coś w stylu Arkanoid i na początek zająłem się odbijaniem piłki od ścian. Z tym nie mam problemu, piłeczka odbija się ładnie i gładko, ale chciałbym, by startowała z określonego miejsca - konkretnej pozycji określonej w arkuszu stylów (top, left).

Moje pytanie - czy mogę przypisać style.left elementu do zmiennej? Nie wychodzi mi to, zamieniłem na element.offsetLeft i działało. Liczbę ze style.left chciałem wyciągnąć za pomocą parseInt(), taki był zamysł i nie ukrywam, zirytowałem się trochę, że nie mogę tego zrobić ;)

 

var pilka = document.getElementById("ball");
var a = pilka.style.left;
document.write(a);

 

Answer 1

Najpierw ustaw position: absolute (pozycja będzie wtedy ustalona wg pierwszego rodzica, który ma ustawione position inne niż domyślne lub dla całego okna, jeśli takiego rodzica nie ma). Potem możesz sobie ustalić:

pilka.style.left = 0;
pilka.style.top = 0;

, czyli przy pozycjonowaniu absolutnym przykleisz piłkę do lewego górnego rogu ekranu (jeśli żaden rodzic elementu "piłka" nie ma domyślnego position - bodajże "static" - czyli musisz mieć np. absolute lub relative na tym elemencie względem którego chcesz ustawiać piłkę)..

https://css-tricks.com/almanac/properties/p/position/

Comments

Nie do końca o to mi chodziło. W arkuszu stylów mam powiedzmy coś takiego:

#cont {
            position: relative;
            width: 600px;
            height: 600px;
            border: 1px solid black;
            
        }
        
 #ball {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 40px;
            height: 40px;
            background-color: black;
            
        }

Kontener i kwadracik wewnątrz z pozycją względem kontenera. Chcę wydobyć wartości Top i Left do zmiennych x i y;

W skrypcie js coś takiego:

var ball = document.getElementById("ball");
        var x = ball.style.left;
        var y = ball.style.top;
        
        var a = ball.offsetLeft;
        var b = ball.offsetTop;
        
        document.write(x + " " + y + "|" + a + " " + b);
        
        

Wyświetla się:   | 100 100. Czyli nie mogę więc wyciągnąć wartości left i top z arkusza za pomocą var x = ball.style.left?

---

Metody offset służą odczytowi pozycji elementu względem rodzica:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

Natomiast metody element.style.X (czyli w miejsce X wstawiasz m.in.: left/top/position/color/background/width/height itd.) ustawiają Ci styl dla danego elementu.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

[edit]

Do odczytu możesz również wykorzystać metodę window.getComputedStyle();

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Przykład:

	var pilka= document.getElementById('ball');
	
	console.log('element.offsetLeft: ', pilka.offsetLeft);
	console.log('window.getComputedStyle: ', window.getComputedStyle(pilka, null).getPropertyValue('left'));