getElementById -> Ändern von CSS ID's mit z.B. a href

Maverick · 29. Mai 2015

Hallo Zusammen,

ich hoffe Ihr könnt mir helfen....
Ich baue einen Button / Href mit Style via CSS.
die Hover Effekte futionieren auch alle... und die MenuB attribute kann ich auch ändern z.B. "parent.frames["f-oben1"].document.getElementById("MenuB").style.top"

Frage:
Wie kann ich Attribute von MenuB - A ändern?

Java:
parent.frames["f-oben1"].document.getElementById("MenuB").style.top

html
<div id="MenuB" > <a href="#">Test</a></div>

css
#MenuB {
border-style : solid;
border-width : 1px;
border-color : #57d3a0;

top : 0px;
left : 1%;
height : 5%;
width : 5%;

text-align : center;
line-height : 0px;
color : #f0f0f0;
font-size : 1px

}

#MenuB a {
xxxxx

}

Basi · 29. Mai 2015

Ganz einfach:

JavaScript

document.getElementById("MenuB").getElementsByTagName("a")[0];

Wobei die 0 das 1. Element ist. Wenn du beispielsweise 3 a-Tags in deinem DIV hast wären sie mit 0, 1, 2 nummeriert.

Und dann setAttribute.

JavaScript

document.getElementById("MenuB").getElementsByTagName("a")[0].setAttribute("href", "meineSeite.html");

Maverick · 29. Mai 2015

Klasse, vielen Dank...

noch eine Frage.. .

Ich have die Div ID über eine Java Funktion geändert.... allerdings wie kann ich ber JAVA function (IF) auslesen welche gerade aktiv ist? BSP: Ich änder per java MenuB auf MenuA...
Habe es mit eine Hilfs Variablen ersteinmal gelöst...

HTML

<div class="Oben" id="MenuB1" onclick="test();return false;">Menü</div>

JavaScript

if (Menu_Button_Ein == 0) {
    document.getElementById("MenuB1").setAttribute("id", "MenuB2");
    Menu_Button_Ein =1;
}
else {
    document.getElementById("MenuB2").setAttribute("id", "MenuB1");
    Menu_Button_Ein =0;
}

CSS

#MenuB1 { 
    border-style : solid;
    border-width : 1px;
    border-color : #57d3a0;

    top : 0px;
    left : 1%;
    height : 1%;
    width : 4%;

    text-align : center;
    line-height : 0px;
    color : transparent;
    font-size : 1px
}




#MenuB2 { 
    -moz-box-shadow: 0 0 20px #57d3a0; 
    -webkit-box-shadow: 0 0 20px #57d3a0; 
    box-shadow: 0 0 20px #57d3a0; 

    border-style : solid;
    border-width : 1px;
    border-color : #57d3a0;

    left : 1%;
    width : 15%;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;

    text-align : center;
    color : #f0f0f0;
}




#MenuB:hover { 
    -moz-box-shadow: 0 0 20px #57d3a0; 
    -webkit-box-shadow: 0 0 20px #57d3a0; 
    box-shadow: 0 0 20px #57d3a0; 

    /* Container properties */
    width: 15%;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;

    color : #f0f0f0;
}

Alles anzeigen

Basi · 29. Mai 2015

Hallo. Die ID eines Elementes verändert man in der Regel nicht. Du solltest dies mit Klassen lösen, dazu habe ich deine Funktion etwas geändert:

JavaScript

function test()
{
    var element = document.getElementById("Menu");

    if(element.getAttribute("class").indexOf("MenuB1") >= 0)
    {
        element.setAttribute("class", "Oben MenuB2");
    }
    else
    {
        element.setAttribute("class", "Oben MenuB1");
    }
}

Alles anzeigen

Dann änderst du in deinem CSS noch die ID's zu Klassen. Außerdem passt du dein HTML wie folgt an:

HTML

<div class="Oben MenuB1" id="Menu" onclick="test();">Menü</div>

Wie du siehst trennt man zwei Klassen in einem Element mit einem Leerzeichen, dies lässt sich auf beliebig viele Klassen erweitern.

Der Programmablauf ist folgender:

Bei Aufruf der Funktion wird das Element anhand seiner ID ermittelt und in einer Variable gespeichert. Danach wird eine if-Bedingung ausgeführt, hier wird mit getAttribute das "class" Attribut ausgelesen und mittels indexOf wird überprüft ob die Zeichenkette "MenuB1" in dem Attribut vorkommt. Sollte dies der Fall sein wird die Klasse mittels setAttribute auf "Oben MenuB2" gesetzt, andernfalls auf "Oben MenuB1".

indexOf gibt -1 zurück wenn die Zeichenkette nicht gefunden wird. Andernfalls wird eine Zahl zurückgegeben, welche der Stelle entspricht an der die Zeichenkette gefunden wurde.

Maverick · 30. Mai 2015

Danke

Und wie ändere ich ein Element der Classe?

bei einer ID geht es so...
parent.frames["f-oben1"].document.getElementById("MenuB1").style.top = xxx

habe mal ausprobiert:
parent.frames["f-oben1"].document.getElementsByClassName("Oben_MenuB1").style.top = xxx // => Das geht aber nicht

wolf · 30. Mai 2015

der Unterschied ist das 's'
getElementById(id)
getElementsByClassName(class)

getElementsByClassName gibt ein array mit ALLEN Elementen mit der Klasse zurück, also musst du das eine das du brauchst auswählen

JavaScript

var alle = getElementsByClassName('oben');//Alle Elemente mit der Klasse "oben"
var das_erste = getElementsByClassName('oben')[0];//Das erste Element mit der Klasse "oben"
var das_dritte = getElementsByClassName('oben')[2];//Das dritte Element mit der Klasse "oben"

Basi · 30. Mai 2015

ID's sind pro Seite einzigartig, Klassen dürfen mehrfach verwendet werden, daher bekommst du ein Array zurück.
Bei ID's verhält sich das so:

HTML

<div id="einzigartigesElement">Dieses Element hat eine ID, diese ID darf auf dieser Seite nur ein mal vorkommen.</div>

JavaScript

var element = document.getElementById("einzigartigesElement");
console.log(element);

Die Ausgabe in der Konsole:

Code

<div id="einzigartigesElement">

Bei Klassen sieht es anders aus, da sie mehrfach verwendet werden dürfen:

HTML

<style>




div.blau {
    color: darkcyan;
}




div.fett {
    font-weight: bold;
}




div.kursiv {
    font-style: italic;
}




</style>




<div class="blau">Ein DIV-Container mit blauer Schrift</div>
<div class="blau fett">Ein DIV-Container mit blauer und fettgedruckter Schrift</div>
<div class="blau kursiv">Ein DIV-Container mit blauer und kursiver Schrift</div>

Alles anzeigen

Und jetzt Javascript:

JavaScript

var elements = document.getElementsByClassName("blau");
console.log(elements);

Man beachte vor allem die Mehrzahl im Funktionsnamen: getElementsByClassName, ebenso den Variablen-Namen habe ich geändert. Die Ausgabe in der Konsole wird ein Array sein:

Code

HTMLCollection [ <div.blau>, <div.blau.fett>, <div.blau.kursiv> ]

In einer for-Schleife sieht man nun alle Elemente:

JavaScript

for (var i = 0; i < elements.length; i++) {
    console.log(elements[i]);
}

Und die Ausgabe in der Konsole:

Code

elements[0]: <div class="blau">
elements[1]: <div class="blau fett">
elements[2]: <div class="blau kursiv">

Wenn ich nun also die Farbe des fettgedruckten DIV-Containers ändern will geht das so:

JavaScript

elements[1].style.color = "orange";

Maverick · 29. Juni 2015

Sorry... dass geht bei mir nicht....

Teil meiner CSS:
.Button1 {

position : absolute;
top : 0px;
left : 0px;
transition : 2.0s;
}

Meine HTML/Java
var elements = document.getElementsByClassName("Button1");
alert(elements[3]);

Alert = "undefined"

Warum? Könnt Ihr mir helfen?

wolf · 29. Juni 2015

wie sieht dein html dazu aus?

Also es funktioniert auf jeden fall .. http://codepen.io/wolf-w/pen/GJyYGb?editors=101

Basi · 30. Juni 2015

Und denk daran, dass du den 3. Button mit elements[2] ansprichst.

Maverick · 30. Juni 2015

Hi Leute... ich bekomme es leider nciht hin...
Ich möchte gerne da "0px" ausgeben....

Teil meiner CSS:

.Button1 {

position : absolute;

top : 0px;
left : 0px;

transition : 2.0s;
}

Meine HTML/Java

var elements = document.getElementsByClassName("Button1");
alert(elements[0]);

Ausgabe:

Alert = ""

=================================
Habe mal etwas rumgespielt....

Es geht dieses:
var elements = document.getElementsByClassName("Button1");
elements[0].style.backgroundColor = "red"
alert(elements[0].style.backgroundColor);

Aber dieses nicht:
var elements = document.getElementsByClassName("Button1");
alert(elements[0].style.top);

Warum nicht? kann ich keine Variable aus eine CSS auslesen?

Basi · 30. Juni 2015

Auf diesem wege nur Inline Styles.

Du könntest aber offset nutzen:

JavaScript

alert(elements[0].offsetTop);

Oder so ähnlich, weiß ich gerade nicht genau.

Grundsätzlich empfiehlt sich auch die Konsole zu nutzen, dann sieht man im Zweifel nicht eine leere Box sondern noch etwas Information dazu.

Was die Konsole ist und wie das geht findest du hier unter Drittens.

getElementById -> Ändern von CSS ID's mit z.B. a href

Jetzt mitmachen!

Teilen