Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [PHP][CSS][JavaScript]Stylizacja graficzna select
stecosik1
post
Post #1





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 11.05.2018

Ostrzeżenie: (0%)
-----


Hej wszystkim. Mam problem, mam napisana sporą część kodu, i wszystko super ciągnie z bazy, porównuje i takie tam. Jest to wszystko w formie list rozwijalnych, no i problem polega na tym jak taką liste obrobić graficznie w java script, bo tylko takie coś wchodzi w gre... proszę o pomoc
  1. <?php
  2. $kolor = $mysqli->query('SELECT * FROM oslonki WHERE kolor!="null" ORDER BY kolor');
  3. echo '<select name="kolor">';
  4. while($row5 = mysqli_fetch_row($kolor)) {
  5. echo '<option value="'.$row5[5].'">'.$row5[5].$row5[6].'</option>';
  6. }
  7. echo '</select>' . '<br/>';
  8. ?>
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
bael
post
Post #2





Grupa: Zarejestrowani
Postów: 3
Pomógł: 1
Dołączył: 8.08.2010

Ostrzeżenie: (0%)
-----


Generalnie JS nie służy do stylizacji elementów. Rola JS po stronie przeglądarki to wzbogacenie interakcji z użytkownikiem. Do stylizacji wykorzystywany jest CSS. Oczywiście istnieje API, które umożliwia stylizację elementów DOM ale powinno dziać się to dopiero w wyniku interakcji z użytkownikiem (np. zmiana koloru elementu po kliknięciu). Bez sensu jest wysyłać do przeglądarki dokument HTML, czekać aż przeglądarka go wyrenderuje, a na koniec zaaplikować jej skrypt JS tylko po to żeby ustalić wygląd elementów, ponieważ to oznacza że przeglądarka będzie musiała wyrenderować wszystko jeszcze raz.

Stylizacja w wykonaniu JS odbywa się za pomocą własności style, która reprezentuje atrybut style:

Kod
var element = document.querySelector(".myclass"); // zwraca pierwszy element w dokumencie o klasie "myclass"
var elements = document.querySelectorAll(".myclass"); // zwraca wszystkie elementy w dokumencie o klasie "myclass"

// stylowanie kolekcji elementów
elements.forEach( function(element) {
  element.style.color = "red";
  element.style.marginTop = "5px";  // używasz camelCase czyli "margin-top" zmienia się na "marginTop"
});

// stylowanie pojedynczego elementu
element.style.color = "green";
element.style.marginTop = "5px";
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 15.10.2025 - 14:23