---
title: "Byta utseende när jag klickat"
type: "forum-thread"
url: "https://www.webforum.nu/amne/dotnet/183745-byta-utseende-när-jag-klickat"
topic: ".NET"
topic_url: "https://www.webforum.nu/amne/dotnet"
author: "ande85"
published: "2010-06-09T08:48:45.000Z"
updated: "2010-06-09T14:55:03.000Z"
replies: 6
views: 456
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/dotnet/183745-byta-utseende-när-jag-klickat"
---

# Byta utseende när jag klickat

## #1 — ande85, 2010-06-09T08:48Z

På min sida bygger jag upp ett antal divar i code-behind på detta sättet: 

HtmlGenericControl div2 = new HtmlGenericControl("div"); 

Och när man klickar på div2 körs en jquery-metod på detta sättet: 

div2.Attributes\["onclick"\] = "Expand('" + div2.ClientID + "', '.id" + v.Id + "');"; 

Samt att innehållet i diven är inlagt på detta sättet: 

div2.InnerHtml = "\<div class='vacciplan-vaccitable'\>\<a href='#'\>\<div class='vacciplan-padding'\>\<a href='#'\>" + v.Name + "  " + v.Description + "\</a\>\</div\>\</a\>\</div\>\</div\>\<div style='height:28px;'\>\</div\>\<div class='vacciplan-panel-open 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\>"; 

Nu skulle jag vilja byta utseende på div2 när jag klickat. Skulle man kunna exempelvis via något villkor ha en alternativ div? eller har någon en idé på hur jag kan göra? 

Tack på förhand för svar!

Permalänk: https://www.webforum.nu/p/183745

## #2 — newseed, 2010-06-09T11:50Z

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.

Permalänk: https://www.webforum.nu/p/2239744

## #3 — ande85, 2010-06-09T12:27Z

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?

Permalänk: https://www.webforum.nu/p/2239745

## #4 — newseed, 2010-06-09T13:27Z

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

Permalänk: https://www.webforum.nu/p/2239750

## #5 — ande85, 2010-06-09T13:38Z

var inte det som spökade tyvärr

Permalänk: https://www.webforum.nu/p/2239751

## #6 — newseed, 2010-06-09T14:21Z

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.

Permalänk: https://www.webforum.nu/p/2239753

## #7 — ande85, 2010-06-09T14:55Z

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\>

Permalänk: https://www.webforum.nu/p/2239755

---

Tråden på webben: https://www.webforum.nu/amne/dotnet/183745-byta-utseende-när-jag-klickat