 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
willshedo
Threadersteller
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
Verfasst Sa 20.06.2009 10:10
Titel JS setAttribute 'style' - geht das? |
  |
|
Hi alle,
Folgende Aufgabe:
Das div#eins soll beim Laden der Seite per JS auf display:none gesetzt werden.
Irgendwie bin ich grad betriebsblind, warum es nicht geht (falsch formuliert?):
| Code: | <head>
<script type="text/javascript">
function setblock(){
document.getElementById('eins').setAttribute('style','display:none')
}
</script>
</head>
<body onload="setblock()">
.
.
. |
Macht man das überhaupt so?
Achja, edit: ein auslösendes Event gibts außer onload nicht, also nix onmouseup und so.
Grüße,
Chris
Zuletzt bearbeitet von willshedo am Sa 20.06.2009 10:12, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: 
|
Verfasst Sa 20.06.2009 10:22
Titel
|
|
|
| Code: | window.onload = function() {
document.getElementById('eins').style.display = 'none';
} |
|
|
| |
|
|
|
Anzeige
|
|
|
willshedo
Threadersteller
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
Verfasst Sa 20.06.2009 10:48
Titel
|
|
|
Jawoll, das funktioniert, danke.
Aber irgendwie wars wohl doch ein Denkfehler, das zu brauchen; was ich damit erreichen wollte, klappt nämlich erst nicht.
Ich habe drei Bilder, die per JS-Script wechseln, wenn man die Links 1,2 oder 3 anklickt. Soweit, sogut. Dann ein Schalter 'vor' und einer 'Zurück', der ebenfalls per JS die Bilder tauscht - klappt aber erst, nachdem man einmal einen der 1,2,3-Links geklickt hat.
Ich dachte, es reicht, wenn man da beim Onload per JS die Style-Eigenschaft einmal setzt - scheint aber nicht so zu sein.
Wer hilft mir da mal auf die Sprünge?
Beispiel hier: http://s175056319.online.de/test/2.htm
Quellcode sieht so aus:
| Code: |
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function vor() {
if ((document.getElementById('eins').style.display == 'block')
&& (document.getElementById('zwei').style.display == 'none')
&& (document.getElementById('drei').style.display == 'none'))
{
document.getElementById('eins').style.display = 'none';
document.getElementById('zwei').style.display = 'block';
document.getElementById('drei').style.display = 'none';
}
else if ((document.getElementById('eins').style.display == 'none')
&& (document.getElementById('zwei').style.display == 'block')
&& (document.getElementById('drei').style.display == 'none'))
{
document.getElementById('eins').style.display = 'none';
document.getElementById('zwei').style.display = 'none';
document.getElementById('drei').style.display = 'block';
}
else if ((document.getElementById('eins').style.display == 'none')
&& (document.getElementById('zwei').style.display == 'none')
&& (document.getElementById('drei').style.display == 'block'))
{
document.getElementById('eins').style.display = 'block';
document.getElementById('zwei').style.display = 'none';
document.getElementById('drei').style.display = 'none';
}
else document.getElementById('eins').style.display == 'block'
}
function zurck() {
if ((document.getElementById('eins').style.display == 'block')
&& (document.getElementById('zwei').style.display == 'none')
&& (document.getElementById('drei').style.display == 'none'))
{
document.getElementById('eins').style.display = 'none';
document.getElementById('zwei').style.display = 'none';
document.getElementById('drei').style.display = 'block';
}
else if ((document.getElementById('eins').style.display == 'none')
&& (document.getElementById('zwei').style.display == 'block')
&& (document.getElementById('drei').style.display == 'none'))
{
document.getElementById('eins').style.display = 'block';
document.getElementById('zwei').style.display = 'none';
document.getElementById('drei').style.display = 'none';
}
else if ((document.getElementById('eins').style.display == 'none')
&& (document.getElementById('zwei').style.display == 'none')
&& (document.getElementById('drei').style.display == 'block'))
{
document.getElementById('eins').style.display = 'none';
document.getElementById('zwei').style.display = 'block';
document.getElementById('drei').style.display = 'none';
}
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }}
function swap(objId,x,stl,wrt) {
var obj = null;
with (document){
if (getElementById)
obj = getElementById(objId); }
if (obj){
eval("obj.style."+stl+"='"+wrt+"'");
}
}
window.onload = function() {
document.getElementById('eins').style.display = 'block';
}
</script>
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#eins { }
#zwei { display:none; }
#drei { display:none; }
#wahl { cursor:pointer; }
#wahl a.vor { padding-right:20px; }
#wahl a.zurck { padding-left:20px; }
-->
</style>
</head>
<body>
<div id="eins"> <img src="goalsports1.png" width="260" height="100" alt="" /> </div>
<div id="zwei"> <img src="goalsports2.png" width="260" height="100" alt="" /> </div>
<div id="drei"> <img src="goalsports3.png" width="260" height="100" alt="" /> </div>
<div id="wahl"><a class='zurck' href="javascript:zurck();">Zurück</a> <a onfocus="blur()" target="_self"
onmouseup="swap('eins','','display','block','DIV');
swap('zwei','','display','none','DIV');
swap('drei','','display','none','DIV'); ">1</a> <a class='border' onfocus="blur()" target="_self"
onmouseup="swap('eins','','display','none','DIV');
swap('zwei','','display','block','DIV');
swap('drei','','display','none','DIV'); "> 2</a> <a class='border' onfocus="blur()" target="_self"
onmouseup="swap('eins','','display','none','DIV');
swap('zwei','','display','none','DIV');
swap('drei','','display','block','DIV'); ">3</a> <a class='vor' href="javascript:vor();">Vor</a> </div>
</body>
</html> |
Grüße,
Chris
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Sa 20.06.2009 11:32
Titel
|
|
|
hier. ich hatte langweile 
wenn kein js aktiv ist, werden alle bilder angezeigt als fallback. die navi wird nur per js generiert und erweitert sich automatisch, wenn du mehr bilder hinzufügst (siehe kommentar).
testen kann man das ganze hier
| Code: | <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function() {
parseImages();
}
/*
variabe currentimage initialisieren.
in dieser globalen variable wird immer die
id des derzeit angezeigten bildes abgelegt
*/
var currentImage = 0;
function parseImages() {
// array mit allen bildern die ausgeblendet werden sollen erstellen
imageArray = document.getElementById('images').getElementsByTagName('img');
/* variable imageLinks initialisieren */
var imageLinks = "";
// alle bilder bis auf das erste ausblenden
for(var i=0;i<imageArray.length;i++) {
if(i>0){
/* alle bilder außer dem ersten ausblenden */
imageArray[i].style.display = "none";
}
/*
für jedes bild einen link erzeugen.
diese werden in der variable imagelinks gespeichert
und erst später ausgegeben
*/
imageLinks += "<a href=\"javascript:flipImage(" + i + ")\" id=\"" + i + "\">" + i + "</a>";
}
// navigation erzeugen - die braucht ja keiner,
// wenn er kein javascript hat ;) - demnach wird sie auch nur dann angezeigt
naviContainer = document.createElement('div');
naviContainer.id = "wahl";
naviContainer.innerHTML = "";
naviContainer.innerHTML += " <a href=\"javascript:flipImage(currentImage-1)\">Zurü ck</a> "
naviContainer.innerHTML += imageLinks;
naviContainer.innerHTML += " <a href=\"javascript:flipImage(currentImage+1)\">Vor</a> "
document.body.appendChild(naviContainer);
}
function flipImage(num) {
// wenn beim letzten bild auf weiter gedrückt wird, wieder das erste anzeigen
if(num>imageArray.length-1) {
num = 0;
}
// wenn beim letzten ersten bild auf zurück gedrückt wird, das letzte anzeigen
if(num<0) {
num = imageArray.length-1;
}
// alle bilder bis auf das anzuzeigende ausblenden.
for(var i=0;i<imageArray.length;i++) {
if(i!=num){
imageArray[i].style.display = "none";
} else {
imageArray[i].style.display = "block";
}
}
// variable für derzeit angezeigtes bild neu setzen
currentImage = num;
}
</script>
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="images">
<img id="eins" src="goalsports1.png" width="260" height="100" alt="" />
<img id="zwei" src="goalsports2.png" width="260" height="100" alt="" />
<img id="zwei" src="goalsports3.png" width="260" height="100" alt="" />
</div>
</html> |
Zuletzt bearbeitet von sahnemuh am Sa 20.06.2009 11:45, insgesamt 4-mal bearbeitet
|
|
| |
|
|
willshedo
Threadersteller
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
Verfasst Sa 20.06.2009 12:19
Titel
|
|
|
Das ist ja fein,daß du Langeweile hast,  dein Beispiel ist nämlich genau das, was ich suchte. Sehr schön, freut mich. Mir fehlt da irgendwie die Übung in JS...
Grüße, Chris
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
HTML element Style ohne Parentelement Style
Tipps für verwaschenen Style bzw. Splash Style
ul / li style
Adressbuch im OWA Style
Welcher Style
Inline Style und ...?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
