Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JS][AJAX?] Dynamiczna zmiana zawartości CSS
Forum PHP.pl > Forum > Po stronie przeglądarki
Puszy
10.10.2011, 17:03:09
Witam. Mam pewien problem z klasą CSS po stronie klienta. Znalazłem temat który obrazuje mój problem lecz nie zawiera właściwej (dla mnie) odpowiedzi:

http://forum.php.pl/index.php?showtopic=78737

Jest to stary temat 2007 r. więc mam nadzieję że coś się zmieniło. Na Googlach też nie znajduję nic konkretnego.

[HTML] pobierz, plaintext 
  1. <input type="text" sklep="info" />
[HTML] pobierz, plaintext


takich elementów mogę mieć 1, 2, 100, 100000,

CSS wygląda tak
[HTML] pobierz, plaintext 
  1. input[sklep="info"]{
  2. 	background-color: #FF9;
  3. }
[HTML] pobierz, plaintext


Czego szukam? Funkcji JS lub czegokolwiek co zmieni wartość #FF9. Nie chcę używać tablic wszystkich elementów które tego używają, nie chcę dodawać class, id, rel bo kod nie jest skończony, nie chcę getElementById("id_name").setAttribute. nie wchodzi też w grę zmiana src w <link>. Strona nie może być odświeżana.

Najnormalniej w świecie chcę zmienić (np. funkcją change_c("FF0000"); ) zawartość fragmentu CSS.

Myślałem o użyciu AJAX, ale napotykam dwa problemy:
1. Nie wiem czy wygląd dynamicznie się zmieni.
2. Z tego co mi wiadomo AJAX zwraca "coś" i to "coś" muszę gdzieś wstawić, a nie mogę tego wstawić w <div> bo wynik musi być w <head> w <style>.

Reasumując żadne inne popularne rozwiązanie nie wchodzi w grę, tylko zmiana wartości fragmentu (w pliku .php w <head> albo osobnym .css) CSS.

Z góry dziękuję za odpowiedzi.
everth
10.10.2011, 17:09:04
Czyli chcesz dodać własny plik js lub css po stronie przeglądarki?
Puszy
11.10.2011, 00:24:39
Cytat(everth @ 10.10.2011, 18:09:04 ) *
Czyli chcesz dodać własny plik js lub css po stronie przeglądarki?


Nie. Chcę zmienić wartość CSS, np klasy a w tym przypadku wszystkich <input> z atrybutem "sklep" o wartości "info", za pomocą funkcji lub czegokolwiek.
Stronka ma za zadanie konwersje tabeli danych do tabeli złożonej z inputów, z kolei tło inputów musi mieć opcję zmiany tła. Tabela podzielona jest na 8 "paczek" kolumn, po 3-5 kolumn w każdej "paczce". W nagłówku tabeli jest wysuwany div z paletą kolorów, po wybraniu koloru wszystkie inputy w tej "paczce" zmieniają kolor na wybrany. Wydaje się że najprostszym rozwiązaniem jest utworzenie klas z kolorami i zmiana klasy wszystkich inputów w "paczce", niestety ta opcja odpada. Dodam że użytkownikami będą tylko osoby pracujące w moim biurze, więc mam dostęp do ich komputerów, dzięki czemu myślę nad dodaniem pliku .css który będzie znajdował się na każdym komputerze i jego zawartość edytowana będzie AJAXem. Tylko teraz (jutro to sprawdzę) nie wiem jak nakazać przeglądarce, po zmianie i zapisaniu pliku .css przez odpowiedni skrypcik w PHP wywołany AJAXem, żeby sformatowała stronę zgodnie z nowym plikiem bez odświeżania strony.
lobopol
11.10.2011, 06:31:13
Najprostsze rozwiązanie dodaj po kliknięciu w jakiś element klasę np. elementowi body (powiedzmy klasa a), a w css ustaw 
[CSS] pobierz, plaintext 
  1. .info{
  2. color:#fff;
  3. }
  4. .a .info{
  5. color:#000;
  6. }
[CSS] pobierz, plaintext
Puszy
11.10.2011, 11:51:20
@lobopol
O tym nie pomyślałem, bardzo dobre rozwiązanie. Dzięki.

Ale rozwiązałem ten problem w troszeczkę inny sposób.

Tworzę dodatkowy plik css ale z rozszerzeniem .php

[PHP] pobierz, plaintext 
  1. <?php
  2. header("Content-type: text/css");
  3.  
  4. print "input[sklep=\"". $_GET["s"] ."\"]{";
  5. print "background-color: #". $_GET["c"] .";}";
  6.  
  7. ?>
[PHP] pobierz, plaintext


W HTML dodaję

[HTML] pobierz, plaintext 
  1. <link id="st" rel="stylesheet" href="style.php">
[HTML] pobierz, plaintext


i skrypcik JS

[PHP] pobierz, plaintext 
  1. function chs(color, sklep){
  2. 	document.getElementById("st").setAttribute("href", "style.php?r=" + Math.random() + "&c=" + color + "&s=" + sklep + "");
  3. }
[PHP] pobierz, plaintext



Math.random pozwala mi na zażądanie przeglądarce pobrania innego pliku, który tka naprawdę jest tym samym, color ustawia GET. Powyższe rozwiązanie jest zastosowane tylko do jednej kolumny. Teraz jestem w trakcie pisania reszty kodu gdzie wstawiam inputy hidden z wartościami kolorów poszczególnych kolumn (paczek kolumn), dzięki czemu w pliku css dopisuję każdą paczkę kolumn a GETem przesyłam "tablicę kolorów" czyli:

style.php?r=random&info=kolor&amaozn=kolor&...

Najprawdopodobniej zamienię random na obecny czas lub coś innego.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.