im Minor Kulturinformatik/Digitale Medien 3. Semester
Einem Element eine Klasse zuweisen:
var element = document.getElementById("kontaktformular-name");
element.className = 'fehlerhaft';
Direktes formatieren über Style:
document.getElementById("beispielID").style.backgroundColor = "red";
element.style.marginTop = 15; // Falsch!
element.style.marginTop = "15px"; // Richtig
oder den gesamten style Text festlegen:
document.body.style.cssText="background-color:black;"
Ein einfaches Beispiel: Umschalten von Schrift und Hintergrund:
<a href="javascript:changesettings();" id="link">Umschalten</a>
<script>
changesettings();
function changesettings() {
if (document.body.style.backgroundColor == 'white') {
document.body.style.cssText="background-color:black;"
document.getElementById("link").style.cssText = "color:white;
text-decoration: none;"
}
else {
document.body.style.cssText="background-color:white;"
document.getElementById("link").style.cssText = "color:black;
text-decoration: none;"
}
}
</script>
<html lang="de">
<head>
<script type="text/javascript" src="styleswitch.js"></script>
<link href="style1.css" rel="stylesheet" media="screen" type="text/css" title="eins">
<link href="style2.css" rel="alternate stylesheet" type="text/css" media="screen" title="zwei">
<link href="style3.css" rel="alternate stylesheet" type="text/css" media="screen" title="drei">
</head>
<body>
<a href="#" onClick="setActiveStyleSheet('eins'); return false;">Style 1</a>
<a href="#" onClick="setActiveStyleSheet('zwei'); return false;">Style2</a>
<a href="#" onClick="setActiveStyleSheet('drei'); return false;">Style2</a>
</body>
</html>
und das Script:
function setActiveStyleSheet(title)
var i, a;
// Alle link Elemente des Dokuments durchgehen //
for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
// Im rel-Attribut muss irgendwas mit "style" stehen //
// und das Element muss eine title Attribut haben //
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
// erstmal generell verstecken //
a.disabled = true;
// nur wenn der Titel übreinstimmt anzeigen //
if(a.getAttribute("title") == title) {
a.disabled = false;
}
}
}
}
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset = "utf-8">
<title>Untitled</title>
<style>
.hide { display: none; }
.show { display: inline; border-bottom: dotted thin; }
.show2 { display: inline; color: #fff; background-color: #666; padding: 0 3px 0 3px; }
</style>
</head>
<body>
Dieser Text enthält <a name="1" class="show" onClick="showhide(this.nextSibling);">Erläuterungen</a>
<span class="hide"> also geneuereBeschreibungen</span>, die durch einen Klick sichtbar gemacht werden.
Die Erläuterungen werden dann <a name="2" class="show" onClick="showhide(this.nextSibling);">inline</a>
<span class="hide"> es legt sich also nicht etwa ein Container über den Text, wie beim Fähnchen,
sondern die Erklärung wird</span> in den Text eingebaut. Gekennzeichnet sind die entsprechenden Stellen
durch eine dünne gepunktete Linie.
<script>
function showhide(node) {
if (node.className == 'show2')
node.className = 'hide';
else
node.className = 'show2';
return false;
}
</script>
</body>
</html>
Jetzt sollen die Erläuterungen als Fähnchen angezeigt werden. Folgende Änderungen:
...
.show2 { position: absolute; width: 200px; color: #fff; background-color: #666; padding: 3px; }
</style>
<script>
// Globale Variable
var x = 0; var y = 0;
// Funktion die die Mausposition ermittelt und in die Variablen schreibt //
function maus(e) {
x = e.pageX || window.event.x;
y = e.pageY || window.event.y;
}
// Funktion, die die entsprechenden Container anzeigt bzw. versteckt //
function showHide(num) {
var myDiv = document.getElementById("myDiv"+num);
myDiv.style.left = x + "px";
myDiv.style.top = y + "px";
if (myDiv.className == 'show2')
myDiv.className = 'hide';
else
myDiv.className = 'show2'; }
// bei jedem Bewegen der Maus soll die aktuelle Position ermittelt werden //
document.onmousemove = maus;
</script>
</head>
<body>
<!-- Erläuterungen -->
<div id="myDiv1" class="hide"> also geneuere Beschreibungen</div> <div id="myDiv2" class="hide">
es legt sich also nicht etwa ein Container über den Text, wie beim Fähnchen, sondern die
Erklärung wird</div>
<!-- Text -->
<div>Dieser Text enthält <a name="1" class="show" onMouseover="showHide(1);" onMouseout="showHide(1);">
Erläuterungen</a>, die durch einen Klick sichtbar gemacht werden. Die Erläuterungen werden dann
<a name="2" class="show" onMouseover="showHide(2);" onMouseout="showHide(2);">inline</a> in den
Text eingebaut. Gekennzeichnet sind die entsprechenden Stellen durch eine dünne gepunktete Linie.</div>
</body>
</html>