Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js/css] oddzielenie wyglądu od treści - css w osobnym pliku + javascript
Forum PHP.pl > Forum > Po stronie przeglądarki
wujek_bogdan
przyzwyczajony jestem do oddzielania wyglądu od treści, staram się wieć nie umieszczać styli wewnątrz tagów html, a w osobnym pliu *.css. Niestety javascript sobie z tym nie radzi. jeśli chcę pobrać właściwość jakiegoś elementu o danym ID, muszę style umieszczać wewnątrz tego znacznika. czy jest na to jakiś sposób, tzn czy można "zmusić" skrypt js, aby czytał style tagów z pliku .css ?
erix
Yyyy, przyznam, że jeszcze nie spotkałem się z czymś takim...

No chyba, że JS jest wywoływany bezpośrednio, bez zdarzenia typu window.onload, czy DOMContentLoaded. Wtedy, to się nie dziwię. ;]
wujek_bogdan
to może na prostym przykładzie:
na początku wywołuje funkcje:
  1. window.onload = JakasFunkcja;
  2. function JakasFunkcja() {
  3. var mojaZmienna = document.getElementById('jakiesID');
  4. alert(mojaZmienna.style.display);
  5. }

i jesli moj kod HTML wyglada tak:
  1. <p id="jakiesID" style="display:block;">coś</p>

to oczywiście wszystko działa, ale jeśli styl umieszczam w osobnym pliku .css wtedy html wygląda tak:
  1. <p id="jakiesID">coś</p>

i wtedy skrypt nie działa. chciałem uniknąć umieszczania styli wewnątrz tagów HTML. 
skowron-line
Wogóle źle się do tego zabierasz. Ty chcesz zmienić style w arkuszu a nie bezpośrednio w elemencie.
link poniżej powinien Ci pomóc.
http://www.quirksmode.org/dom/changess.htm
wujek_bogdan
można jaśniej. co robię nie tak?
pobieram styl danego tagu, o danym ID i wyświetlam jako alert. styl jest pobierany jeśli znajduje się w kodzie HTML, ale jeśli znajduje się w pliku .css to już nie jest pobierany. 

Cytat
Ty chcesz zmienić style w arkuszu a nie bezpośrednio w elemencie.

czyli js nie jest na tyle "mądry" żeby dobrać się do stylu zdefiniowanego w pliku .css, lub w deklaracji stylu w nagłówku strony?
lubię mieć porządek i nie chcę śmiecić stylami w kodzie strony. 
erix
Ale to Ci na jedno wychodzi... To, co zmodyfikujesz w DOM nie jest przecież odzwierciedlane w plikach...

Poza tym, zamiast zmieniać style, zmieniałbyś klasy, to byłby najlepszy porządek.
zegarek84
jemu nie chodzi o samą zmianę wartości a o pobranie ich do skryptu - @skowron-line podał rozwiązanie ale walnął małego byka z linkiem - poprawny:
http://www.quirksmode.org/dom/changess.html - zgubił l

ale po co daleko szukać jak na forum tutaj jest prostsze rozwiązanie winksmiley.jpg
http://forum.php.pl/index.php?showtopic=71...mp;#entry370701
skowron-line
Cytat(erix @ 29.05.2009, 11:33:45 ) *
Poza tym, zamiast zmieniać style, zmieniałbyś klasy, to byłby najlepszy porządek.


Zmiana klas nie jest najlepszym rozwiązaniem w przypadku dużej ilości danych w stylu. Po co powielać rzeczy których się nie ma zamiaru zmienić moim zdaniem to będzie tworzyło dodatkowy bałagan + niewiadomo czy kolega ma z góry zdefiniowaną wartość koloru na jaki chce zmienić jeżeli będzie wyliczana dynamicznie to również to rozwiązanie się nie sprawdzi.
No ale mogę się mylić znam się na CSS tyle co na lotach w kosmos ( wiem w którą stronę ).
erix
Cytat
Po co powielać rzeczy których się nie ma zamiaru zmienić moim zdaniem to będzie tworzyło dodatkowy bałagan + niewiadomo czy kolega ma z góry zdefiniowaną wartość koloru na jaki chce zmienić jeżeli będzie wyliczana dynamicznie to również to rozwiązanie się nie sprawdzi.

W 90% przypadków zmiana klasy będzie słuszna. I co najważniejsze - semantyczna. Zechce zmienić wygląd/się rozmyśli, to potem będzie musiał kopać w niewiadomo ilu plikach JS, żeby coś znaleźć. Pomijam tu display, bo to jest przypadek szczególny. winksmiley.jpg

Ale to nie zmienia faktu, że można by zrobić jakąś klasę abstrakcji do tego celu, która by np. wstrzykiwała dynamicznie reguły do document.styleSheets, czy nawet dołączała osobny CSS w przypadku wykrytej obsługi JS.
wujek_bogdan
dzięki wszystkim za pomoc. widzę, że nie ma jakiegoś banalnego rozwiązania (myślałem, że jest, tylko moja znajomość js jest zbyt słaba), ale sposób podany w linku na samym początku wydaje się być tym czego szukam.

jeśli chodzi o zamianę klas to nie jest to to czego szukam, bo klasę owszem mogę zmienić, ale nie w tym rzecz. owszem rozwiązuje to problem z bałaganem w tagach html, ale nie rozwiązuje problemu pobierania wartości atrybutów css z danego znacznika html.
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.