ugrás a tartalomhoz

Javascripttel CSS tulajdonságok elérése DOM-on keresztül

nevergone · 2009. Május. 13. (Sze), 13.47
Sziasztok!

Van egy XHTML Strict Doctype-pal rendelkező oldal, amelyen szeretném elérni az elemek CSS tulajdonságát a DOM-on keresztül. Viszont az elem_neve.style.tulajdonság nem tartalmaz semmilyen értéket (sőt maga a style objektum sem tartalmaz semmit abból, ami a CSS-ben be lett állítva az adott elemre), csak azokat a tulajdonságokat látom, amelyeket a Javascriptben ott beállítok.
Mit és hol hibázok el? Tesztelésre jelenleg Firefox 3 -at használok.

Köszönöm a segítséget! :)
 
1

document.styleSheets

Ajnasz · 2009. Május. 13. (Sze), 15.20
Azok a CSS tulajdonságok, amelyeket külső css ruleokban adsz egy elemhez, nem érhetőek el közvetlenül egy elemen keresztül. Az általad említett módszerrel az elem style attirbútumában beállított tulajdonságokhoz lehet hozzáférni.

A document.styleSheets objektumon keresztül tudsz az egyéb style-okkal mahináláni, azonban ez nem túl userfriendly. Inkább definiálj előre css classokat, majd azt állítsd az elemen.
2

köszönöm

nevergone · 2009. Május. 13. (Sze), 15.24
Köszönöm a választ, én közben ezt találtam még:
http://www.quirksmode.org/dom/getstyles.html

Valakinek valami más ötlet, hasznos tipp esetleg?
3

link elérése

PHP-mókus · 2010. Már. 15. (H), 10.55
Sziasztok!

Hasonló problémával küzdök én is, csak kicsit másképp. A két böngészőre (ie és ff) külön css-t írok, és szeretném, ha a javascript mindig eldöntené, hogy melyikre van szükség. De valamiért nem megy a dolog.

A böngésző típusa megvan. De valahogy nem érem el az oldalam elemeit.

Konkrétan a fejléc:

<!DOCTPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cím</title>
<script language="Javascript" type="text/javascript" src="vizsgalo.js"></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
</head>


a vizsgalo.js pedig a következő rövid kódot tartalmazza:

var links = document.getElementsByTagName("link");
document.write(links.href);

Idáig szeretnék eljutni, hogy aztán módosíthassam a links.href értékét pl. links.href = stilus_1.css -re

De a böngésző a fenti kiíratással annyit "mond", hogy undefined. Mindegyik böngésző, és a weboldal minden elemére.. az img-re, a div-re, mindenre. Ha beleteszek esetleg egy indexet (pl. links[0]), akkor nem is ír ki semmit.

Tudnátok segíteni, hogy mit csinálok rosszul?

Előre is köszi!!
4

Mi a probléma?

Poetro · 2010. Már. 15. (H), 12.28
Mivel a JavaScript még a linkek előtt szerepel, sőt, igazából minden előtt, ezért valószínű, hogy bármit is találna. Vagy rakd a body lezárása elé, vagy pedig vizsgáld, hogy a DOM egyáltalán elérhető-e már, esetleg a dokumentum betöltődött-e.

Mikor ír ki micsoda undefined-ot?

Azt ugye tudod, hogy legvalószínűbb esetben a links az egy tömb lesz, már ha a böngésző egyáltalán talál valamit.

document.write-ot semmilyen korszerű kódot író programozó nem ír, mivel csak problémák vannak vele.
6

Köszi a gyors választ! Hát,

PHP-mókus · 2010. Már. 15. (H), 21.51
Köszi a gyors választ!

Hát, jó kérdés, hogy mi okozza. Őszintén ez volt életem első js kódja, ráadásul könyvből, de nem sikerült túl jól :(

Időközben kis segítséggel sikerült megoldanom a problémát, de továbbra sem tudom, hol a hiba.
Az előbbi kódot függvénybe illesztettem, és így már működik:

function css_valt()
{

var bongeszo = navigator.appName;

var links = document.getElementById("css");

if (bongeszo == "Microsoft Internet Explorer")
links.href = "stilus_1.css";

}


a html hozzá:

<!DOCTPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cím</title>
<script language="Javascript" type="text/javascript" src="vizsgalo.js"></script>
<link href="stilus.css" rel="stylesheet" type="text/css" id="css" />
</head>

<body onload="css_valt()">

stb...


Visszatérve az előzőhöz, az "undefined"-ot akkor írta, amikor betöltöttem a html-t, amibe be volt ágyazva a js fájl. Ott még nem tettem függvénybe a scriptet, csak az előbb írt 2 sor szerepelt a fájlban. Az a változat se a head-ben, se a body-ban nem működött, nem ért el semmit.
Lehetséges, hogy a js csak függvényben működik, és csupasz kódsorral nem, mint a php?

Van más módszer is a document.write-ot kívül?


A másik hozzászólást is köszönöm! Megnéztem a linket, de nekem úgy tűnt, hogy azzal csak a html-t változtathatom, de a stíluslapot nem (ha én értettem félre, elnézést!), viszont mindig külsö stíluslapot használok, sose html elemekbe ágyazva. Ennek ellenére hasznos kis olvasmány volt! :)
7

DOM

Poetro · 2010. Már. 15. (H), 22.40
Megnéztem a linket, de nekem úgy tűnt, hogy azzal csak a html-t változtathatom, de a stíluslapot nem

Nem tudom, hogy azért érzed-e a kapcsolatot a HTML és a CSS között. A link / style elem nem a HTML-ben van?

Van más módszer is a document.write-ot kívül?

Igen, úgy hívják DOM.
5

A két böngészőre (ie és ff)

kuka · 2010. Már. 15. (H), 13.15
A két böngészőre (ie és ff) külön css-t írok, és szeretném, ha a javascript mindig eldöntené, hogy melyikre van szükség.

Tulajdonképpen ie és szabványtisztelő böngészők kellene legyen a felosztás. Amely esetben a megoldás máris adja magát : használj feltételes kommentet (Peter-Paul Koch cikke remélhetőleg angolul is érthető). Jókora adag szívástól megkiméled magad.