[js/css] oddzielenie wyglądu od treści - css w osobnym pliku + javascript Opcje

[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:

[HTML] pobierz, plaintext 
window.onload = JakasFunkcja;
function JakasFunkcja() {
var mojaZmienna = document.getElementById('jakiesID');
alert(mojaZmienna.style.display);
}
[HTML] pobierz, plaintext 

i jesli moj kod HTML wyglada tak:

[HTML] pobierz, plaintext 
<p id="jakiesID" style="display:block;">coś</p>
[HTML] pobierz, plaintext 

to oczywiście wszystko działa, ale jeśli styl umieszczam w osobnym pliku .css wtedy html wygląda tak:

[HTML] pobierz, plaintext 
<p id="jakiesID">coś</p>
[HTML] pobierz, plaintext 

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. 

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. 

Ten post edytował wujek_bogdan 29.05.2009, 12:27:16

[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 (IMG:http://img-upload.pl/images/530_j.gif) - poprawny:
http://www.quirksmode.org/dom/changess.html - zgubił l (IMG:http://img-upload.pl/images/579_u.gif)

ale po co daleko szukać jak na forum tutaj jest prostsze rozwiązanie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
http://forum.php.pl/index.php?showtopic=71...mp;#entry370701

Ten post edytował zegarek84 29.05.2009, 13:10:11

[skowron-line]

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]

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. (IMG:http://forum.php.pl/style_emoticons/default/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.