podmiana wartości zmienną

pytanie zadane 27 kwietnia 2018 w JavaScript przez Darven Użytkownik (860 p.)

Mam w html diva:

<div id = "div1" ></div>

I javaScript:

var div = document.getElementById("div1");
    div.style.height = "250px";
    div.style.width = "250px";
    div.style.background = "black";
    var test = 45;
    div.style.transform = "translateY(25px)";

i pytanie: Jak w ostatniej linijce JS zastąpić "25px" zmienną "test"???

komentarz 27 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

odpowiedź otrzymałeś, ale tak na marginesie to dlaczego przypisujesz tyle styli w JS?

Nie lepiej zrobić po prostu w pliku CSS klasę, która nadałaby te style i poprzez JS np. na jakiś event dodać tę klasę? (poczytaj o classList) Pozwoli Ci to rozdzielić HTML - CSS - JS.

komentarz 27 kwietnia 2018 przez Darven Użytkownik (860 p.)

Potrzebuje zrobić jedną rzecz na teraz, nie wiem jeszcze jak przypisywać wartośći z JS do CSS

1 odpowiedź

odpowiedź 27 kwietnia 2018 przez shotokan Nałogowiec (39,660 p.)
wybrane 27 kwietnia 2018 przez Darven

Najlepsza

Ja bym użył notacji z tzw. grawisem, czyli znakiem ` - ten sam klawisz na klawiaturze, co ma tyldę '~'

div.style.transform = `translateY(${test}px)`;

komentarz 27 kwietnia 2018 przez Darven Użytkownik (860 p.)

Działa, dzięki :D

Ale mam jeszcze pytanko, bo nie ogarniam przypisywania wartości CSS w JS i raz coś działa a raz nie.

Np. CSS:

border-radius: 25px;

a w JS:

div.style.border-radius = "20px";

I....nie działa, mimo że to zapis analogiczny do np.

div.style.height = "250px";

który działa....Jaka jest zasada pisania tego cholerstwa w JS??

2	komentarz 27 kwietnia 2018 przez shotokan Nałogowiec (39,660 p.) Przy stylach wieloczłonowych nie stosuje się ' - ' tylko łączy się w jeden wyraz stosując notację wielbłądzią, np. border-radius zastępujemy borderRadius