Byta utseende när jag klickat

Man kan tyvärr inte påverka utseendet direkt i efterhand. Det man däremot kan göra är att ändra tillhörande CSS-klass. Definera därför två CSS-klasser, en före klick och en att använda efter klick, ex för klass efter klick:

.onclickclass{
color: #f00;
}

Om div2 har id "div2" ändrar du sedan detta enkelt med följande kommando:

document.getElementByID('div2').className = "onclickclass";

Om man gräver djupt på nätet finns där någon som har lyckats "hacka" möjligheten att ändra reglerna för CSS och därmed ändra utseendet "direkt" snarare än bara ändra CSS-klass. Ovanstående tycker jag dock själv fungerar utmärkt.

Jag har nu ändrat till följande:

        div2.InnerHtml = "\<div id='clickProductDiv' class='vacciplan-vaccitable'\>\<a href='#' onclick='document.getElementById('clickProductDiv').className='vacciplan-vaccitable-clicked';'\>\<div class='vacciplan-padding'\>\<a href='#' onclick='document.getElementById('clickProductDiv').className='vacciplan-vaccitable-clicked';'\>\<b\>" + v.Name + "\</b\>  " + v.Description + "\</a\>\</div\>\</a\>\</div\>\</div\>\<div style='height:28px;'\>\</div\>\<div class='vacciplan-panel id" + v.Id + "'\>\<div class='vacciplan-panel-headers'\>\<div style=' float:left; padding: 3px; padding-left: 45px; width: 100px;'\>Leveransdatum\</div\>\<div style=' float:left; padding: 3px; width: 225px;'\>Förpackning\</div\>\<div style=' float:left; padding: 3px; width: 100px;'\>Dos\</div\>\<div style=' padding: 3px;'\>Total\</div\>\</div\>\<div style='background-color: #ffffff; height: 5px'\>\</div\>";

där första diven i innerhtml-taggen har fått ett id och senare följer länken...men det vill inte fungera, ser någon nåt uppenbart fel varför det inte fungerar?

Där är ett mellanslag i className om det nu är det som spökar?

var inte det som spökade tyvärr

Vilket utseende är det du vill ändra? Jag ser att där är mycket som är angivet i STYLE-tagar direkt på elementen. Dessa kan man aldrig påverka då dessa alltid slår högre än klass-stil.

Prova med något enkelt som att ge vacciplan-vaccitable-clicked en röd border och se om den dyker upp när du klickar.

Fungerade inte med en border... har klippt ut den del som jag vill förändra nu för att förtydliga något. Det är således 'clickProductDiv' som ska förändras och innanför denna ligger länken eller länkarna.

<div id='clickProductDiv' class='vacciplan-vaccitable'>
<a href='#' onclick='document.getElementById('clickProductDiv').classNam e='vacciplan-vaccitable-clicked';'>
<div class='vacciplan-padding'><a href='#' onclick='document.getElementById('clickProductDiv').classNam e='vacciplan-vaccitable-clicked';'><b>" + v.Name + "</b> " + v.Description + "</a></div>
</a>
</div>