| Autor |
Nachricht |
ezbo
Threadersteller
Dabei seit: 16.08.2005
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 26.05.2009 14:25
Titel Div mit Mausklick anzeigen lassen - Javascript |
  |
|
Hallo
Ich möchte gerne über einen Link einen Div Container einblenden lassen, leider funktioniert es nicht und ich weis nicht warum? Wo liegt der Fehler begraben??
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.boxfloat {
float: left;
width: 20%;
margin-right: 10px;
border: 1px solid #000000;
padding: 10px;
background-color: #FFFF00;
display: none;
}
</style>
<script type="text/javascript">
function func1() {
if (document.getElementByClass('boxfloat').style.display == 'none') {
document.getElementByClass('boxfloat').style.display = 'block';
}
}
</script>
</head>
<body>
<a href="#" onclick="func1()">Link</a>
<div class="boxfloat"><p>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </p></div>
</body>
</html> |
|
|
| |
  |
 |
Pixelpole
Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht:
|
Verfasst Di 26.05.2009 14:36
Titel
|
|
|
es gibt kein getElementByClass 
eine solche Funktion kannst du dir aber leicht selber basteln über getElementsByTagName und getAttribute.
|
|
| |
|
|
|
Anzeige
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 26.05.2009 14:37
Titel
|
|
|
| Code: |
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
|
|
|
| |
 |
|
ezbo
Threadersteller
Dabei seit: 16.08.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 26.05.2009 14:48
Titel
|
|
|
| Pixelpole hat geschrieben: | es gibt kein getElementByClass
eine solche Funktion kannst du dir aber leicht selber basteln über getElementsByTagName und getAttribute. |
wenn ich aber statt Class Id verwende funktioniert es genauso wenig 
|
|
| |
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 26.05.2009 15:18
Titel
|
|
|
das auslesen von css eigenschaften gehört nicht zu DOM.
also kann js gar nicht wissen welche eigenschaft du deiner ID per CSS gegeben hast.
Es gibt sowas wie CSSRules bei Javascript, kann dir allerdings nicht genau sagen wie weit das browser unterstützen.
also entweder suchst im netz nach cssrules, du setzt auf ein framework (bei dem kleinen ding überladen), du verzichtest auf die überprüfung (was hier nicht schaden würde) oder du setzt die diplay:none eigenschaft mit Javascript beim laden (setzt vorraus, dass das dokument erst geladen wird und dann erst gesetzt wird - onload, eventlistener)
http://www.mediengestalter.info/forum/10/css-mit-js-auslesen-getelementbyid-58386-1.html
// noch n netter link
so is am schnellsten:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#boxfloat {
float: left;
width: 20%;
margin-right: 10px;
border: 1px solid #000000;
padding: 10px;
background-color: #FFFF00;
display:none;
}
</style>
<script type="text/javascript">
function func1() {
document.getElementById('boxfloat').style.display = 'block';
}
</script>
</head>
<body>
<a href="#" onclick="func1()">Link</a>
<div id="boxfloat"><p>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </p></div>
</body>
</html> |
Zuletzt bearbeitet von choise am Di 26.05.2009 15:21, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Psilo
Dabei seit: 20.02.2007
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Di 26.05.2009 15:50
Titel
|
|
|
vielleicht hilft dir auch das hier weiter:
Div ein ausblenden
ist ne funktion um ids ein/auszublenden
|
|
| |
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 26.05.2009 15:58
Titel
|
|
|
|
nur wird das beim ersten mal klicken, so wie er es haben will, mit deiner funktion nicht funktionieren, da wie ich schon gesagt hatte, die style.display methode nicht die eigenschaften der ID aus der css deklaration auslesen kann.
|
|
| |
|
|
Psilo
Dabei seit: 20.02.2007
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Di 26.05.2009 16:09
Titel
|
|
|
oh ja sorry.. hatte ich überlesen..
//
aber das müsste jetzt passen
Funktion um Divs ein oder auszublenden
Zuletzt bearbeitet von Psilo am Di 26.05.2009 16:24, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[JavaScript] Divs dynamisch anzeigen
javascript - div/bild bei mouseover neben link anzeigen
per Mausklick ins Vollbild
Felder ein-/ausblenden auf Mausklick
hintergrund bei mausklick verschieben?
Bildüberblenden per Mausklick mit Switch?
|
|
Willkommen auf dem Portal für Mediengestalter
