JavaScript Link Elment indentifizieren

F_GXdx · 29. August 2013

Hi,

Ich habe einen Button, mit dem ich ein Link-Element austausche. Jetzt scheint es aber mit JavaScript keine andere Möglichkeit zu geben, dieses Element auszuwählen, als mit

document.getElementsByTagName("link").item(NUMBER);

Das das nicht gut ist, ist ja klar. Gibt es wirklich keinen anderen Weg?

Hintergrund ist, dass mit dem Button die .css File getauscht wird und ich nicht so scharf drauf bin, es anders zu lösen.

kthxbai

Madman1209 · 29. August 2013

Hi,

getElementByName? getElementByID? Oder mit einem Framework wie jQuery? Das sind extrem wenige und schlechte Infos. Poste mal ein bisschen Code.

Das Statement "in Javascript geht nur getElementsByTagName" ist schlicht falsch.

Überhaupt: welche CSS wird getauscht? Die der Seite selbst?

VG,
Mad

IMakeULoveMe · 29. August 2013

Ich nehme an du möchtest dynamisch Style Sheets einbinden.
Warum nimmst du nicht gleich ein Anker Tag?
Kannst dieses dann in einen Button umstylen.
Amsonsten würde ich hier mit Events arbeiten wenn du die Buttons behalten willst.

F_GXdx · 29. August 2013

HTML:

Code:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>x.de</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type='text/javascript'>
function changeCSS() {
  var oldLink = document.getElementsByTagName("link").item(0);
  var newLink = document.createElement("link");

  newLink.setAttribute("rel", "stylesheet");
  newLink.setAttribute("type", "text/css");
  newLink.setAttribute("href", "style2.css");
 
  document.getElementsByTagName("head").item(0).replaceChild(newLink, oldLink);
}
 </script>
</head>
<body >
<div onclick="javascript:changeCSS();" style="background-color:#BBB">Change Backgroundcolor</div>
</body>
</html>

style.css:

Code:

body{background-color:#FFF;}

style2.css:

Code:

body{background-color:#000;}

carom · 29. August 2013

Was genau ist nun dein Problem? Im der HTML5-Referenz steht nichts davon, dass ein link-Element kein id-Attribut haben darf (link erbt von HTMLElement), warum nicht darüber lösen?

document.getElementById('theLink').setAttribute('href', 'style2.css');

edit: würde aber auch eher Klassen austauschen als das gesamte CSS-File.

Daaron · 29. August 2013

Viel effizientere Lösung:
Leg ne zusätzliche CSS-Datei an, die verschiedene "Optiken" bereit stellt, je nachdem welche Klasse dein <body> noch hat. <body class="red"> würde dann meinetwegen ein rotes Theme aktivieren, class="blue" ein blaues etc...
Dann schnappst du dir ein JS-Framework und arbeitest mit den jeweiligen addclass/removeclass - Methoden.

F_GXdx · 29. August 2013

carom schrieb:
link erbt von HTMLElement

Ah, das war mir nicht klar. Frag mich nur grad, warum ich's nicht einfach mal ausprobiert hab ^^

Daaron schrieb:
Dann schnappst du dir ein JS-Framework und arbeitest mit den jeweiligen addclass/removeclass - Methoden.

Ahja, auch clever.

Danke Leute.

Suche

JavaScript Link Elment indentifizieren

F_GXdx

Captain

Madman1209

Fleet Admiral

IMakeULoveMe

Cadet 2nd Year

F_GXdx

Captain

carom

Gast

Daaron

Fleet Admiral

F_GXdx

Captain

Ähnliche Themen