nicht angemeldet
Problem bei meinem ersten JavaScript Script
Hallo,
ich habe versucht einen "Style-Wechsler" zu programmieren.
Er macht aber nicht unbedingt das was er soll.
Vielleicht könnt ihr mir ja helfen.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link id="css" rel="stylesheet" type="text/css" href="style1.css" />
[code lang=javascript]
<script type="text/javascript">
var style = document.getElementById( 'css' );
function style1(){
style.removeAttribute( 'href' );
style.setAttribute( 'href', 'style1.css' );
}
function style2(){
style.removeAttribute( 'href' );
style.setAttribute( 'href', 'style2.css' );
}
</script>
</head>
<body>
<h1>Überschrift</h1>
<a href="" onClick="style1();" >Style 1</a>
<a href="" onClick="style2();" >Style 2</a>
</body>
</html>
[/code]
-
Hallo,
Er macht aber nicht unbedingt das was er soll.
Sondern was?
Verweis-Elemente mit leerem Verweisziel und onclick sind keine gute Idee.
Beim Klicken wollen die natürlich immer ihr Verweisziel anspringen bzw. laden. Womöglich wird ohne Verweisziel einfach dass aktuelle Dokument neu geladen, so dass die Style-Änderung sofort wieder verloren geht.Zum boßen Draufklicken nimm' lieber Buttons, und alles wird gut:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <link id="css" rel="stylesheet" type="text/css" href="style1.css" /> <script> [code lang=javascript] var style = document.getElementById( 'css' ); function style1(){ style.removeAttribute( 'href' ); style.setAttribute( 'href', 'style1.css' ); } function style2(){ style.removeAttribute( 'href' ); style.setAttribute( 'href', 'style2.css' ); } ~~~ </script> </head> <body> <h1>Überschrift</h1> <a href="" onClick="`style1();`{:.language-javascript}">Style 1</a> <a href="" onClick="`style2();`{:.language-javascript}">Style 2</a> <button onClick="`style1();`{:.language-javascript}">Style 1</button> <button onClick="`style2();`{:.language-javascript}">Style 2</button> </body> </html> [/code] Übrigens muss man hier nicht unbedingt setAttribute und removeAttribute bemühen, eine simple Zuweisung `style.href='myStyle';`{:.language-javascript} tut' auch. Gruß, Don P-
Hallo,
Er macht aber nicht unbedingt das was er soll.
Sondern was?
Verweis-Elemente mit leerem Verweisziel und onclick sind keine gute Idee.
Beim Klicken wollen die natürlich immer ihr Verweisziel anspringen bzw. laden. Womöglich wird ohne Verweisziel einfach dass aktuelle Dokument neu geladen, so dass die Style-Änderung sofort wieder verloren geht.Zum boßen Draufklicken nimm' lieber Buttons, und alles wird gut:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title>
<link id="css" rel="stylesheet" type="text/css" href="style1.css" /><script>
[code lang=javascript] var style = document.getElementById( 'css' );
function style1(){
style.removeAttribute( 'href' );
style.setAttribute( 'href', 'style1.css' );
}
function style2(){
style.removeAttribute( 'href' );
style.setAttribute( 'href', 'style2.css' );
}> </head> > <body> > <h1>Überschrift</h1> > > <a href="" onClick="`style1();`{:.language-javascript}">Style 1</a> > <a href="" onClick="`style2();`{:.language-javascript}">Style 2</a> > > <button onClick="`style1();`{:.language-javascript}">Style 1</button> > <button onClick="`style2();`{:.language-javascript}">Style 2</button> > </body> > </html> > [/code] > > Übrigens muss man hier nicht unbedingt setAttribute und removeAttribute bemühen, eine simple Zuweisung `style.href='myStyle';`{:.language-javascript} tut' auch. > > Gruß, Don P > Danke schön. Klappt jetzt wunderbar. :)
-