Søg
Avatar billede hoppe11 Nybegynder
03. august 2009 - 22:39 Der er 13 kommentarer og
1 løsning

appendChild og setAttribute

jeg har et lille script som skal oprette et element med en class..

elementet bliver oprettet men den bliver ikke stylet?

http://electrobeat.dk.linux17.wannafind.dk/v2.5/_tst.php
Avatar billede olebole Juniormester
03. august 2009 - 22:50 #1
<ole>

Du er nødt til at bruge DOM Level 1, hvis IE skal med:
    ELEMENT.className = "dinKlasse";

/mvh
</bole>
Avatar billede olebole Juniormester
03. august 2009 - 22:53 #2
- men det er lidt en sammenblanding, du har kørende  =)

Hvorfor ikke bruge createElement tilo oprettelse af tbody-, tr- og td-elementer ... og createTextNode i stedet for innerHTML?
Avatar billede hoppe11 Nybegynder
03. august 2009 - 22:56 #3
det er sjældent jeg bruger den her metode... bruger for det meste innerHTML, men lige præcis i denne situation bliver jeg nød til at gøre det sådan her..

hjælp mig lige lidt på vej :)
Avatar billede hoppe11 Nybegynder
03. august 2009 - 22:57 #4
- jeg tænker på oprettelse af elementer.. normalt opretter jeg bare elementer udelukkende via innerHTML
Avatar billede olebole Juniormester
03. august 2009 - 23:27 #5
function add_tagelm(elm)
{
    elm = get_parent(elm, 'div');
   
    var tbl = elm.appendChild(document.createElement('table'));
    var tbdy = document.createElement('tbody');
    tbl.appendChild(tbdy);
    var newRow = document.createElement('tr');
    tbdy.appendChild(newRow);
    var newCell = document.createElement('td');
    tr.appendChild(newCell);
    newCell.className = 'img_tag';
    var newText = document.createTextNode('tst');
    newCell.appendChild(newText);
}
Avatar billede hoppe11 Nybegynder
03. august 2009 - 23:33 #6
tr is undefined :)
Avatar billede hoppe11 Nybegynder
03. august 2009 - 23:33 #7
- men jeg synes godt nok det er noget af en smøre bare for at oprette en table?
Avatar billede olebole Juniormester
03. august 2009 - 23:48 #8
newRow.appendChild(newCell);

Måske 'noget af en smøre' - men dejlig logisk og præcis, som man ville vente, det skulle gøres, hvis man kommer fra andre objekt baserede miljøer og aldrig har brugt JS og HTML-DOM  =)
Avatar billede hoppe11 Nybegynder
04. august 2009 - 10:11 #9
nu virker det, men class'en bliver ikke lagt på

http://electrobeat.dk.linux17.wannafind.dk/v2.5/_tst2.php
Avatar billede hoppe11 Nybegynder
04. august 2009 - 10:15 #10
det her var jo meget lettere, og så kommer class'en også med :p

function add_tagelm(elm)
{
    elm = get_parent(elm, 'div');
   
    elm.innerHTML += '<table class="img_tag" style=""><tr><td></td></tr></table>';
   
}
Avatar billede hoppe11 Nybegynder
04. august 2009 - 10:17 #11
et lille sidespring..

men er det ikke muligt at lave noget border-collapse med div elemtenr? det er egentlig derfor jeg bruger et table element hvilket slet ikke var nødvendigt - hvis man div'ens border ikke blev lagt til width/height
Avatar billede hoppe11 Nybegynder
04. august 2009 - 10:29 #12
jeg er kommet frem til noget her.. men der bliver elementet lavet med innerHTML, så jeg kan umiddelbart ikke referere til mit table element...

table elementet skulle gerne igennem pos_tagelm()

<html>

<head>
<script language="javascript" type="text/javascript">
function get_parent(elm, tag_name)
{
    tag_name = tag_name.toLowerCase();
    for(; elm.tagName.toLowerCase()!=tag_name; elm=elm.parentNode);
   
    return elm;
}

function pos_tagelm(elm, x, y, img_width, img_height)
{
    var pos_x = x;
    pos_x -= elm.offsetWidth / 2;
    if(pos_x < 0) pos_x = 1;
    if(pos_x+elm.offsetWidth > img_width) pos_x = img_width-elm.offsetWidth+1;
   
    var pos_y = y;
    pos_y -= elm.offsetHeight / 2;
    if(pos_y < 0) pos_y = 1;
    if(pos_y+elm.offsetHeight > img_height) pos_y = img_height-elm.offsetHeight+1;
   
    elm.style.left = pos_x+'px';
    elm.style.top = pos_y+'px';
}

function add_tagelm(elm, event)
{
    elm = get_parent(elm, 'div');
   
    pos_x = event.offsetX ? event.offsetX:event.pageX-elm.offsetLeft;
    pos_y = event.offsetY ? event.offsetY:event.pageY-elm.offsetTop;
   
    elm.innerHTML += '<table class="img_tag" style="top:'+pos_y+'; left:'+pos_x+'"><tr><td></td></tr></table>';
}
</script>
<style type="text/css">
table.img_tag {
    border:3px #FFFFFF solid;
    height:120px;
    width:120px;
    position:absolute;
}
</style>
</head>

<body style="background:#999999">

<table style="width:1000px; margin:0px auto; border:1px solid #ff0000">
    <tr>
        <td style="text-align:center">
            <div style="width:682px; position:relative; margin:0px auto">
                <img class="image" style="cursor:crosshair" onclick="add_tagelm(this, event)" src="bin.image.php?id=3&type=event.full">
            </div>
        </td>
    </tr>
</table>

</body>

</html>
Avatar billede hoppe11 Nybegynder
04. august 2009 - 17:28 #13
hov.. det slog mig lige.. det er selvfølgelig fordi klassen er tilregnet selve tabellen og ikke cellen

tabel.img_tag

nu virker det

smid er svar, ole.. og tak for hjælpen! :D
Avatar billede olebole Juniormester
04. august 2009 - 19:24 #14
Det kommer her, men jeg synes stadig en innerHTML løsning er noget slam. Dels har innerHTML aldrig været valid i nogen standard - og dels har brugen en række bagdele. Prøv f.eks. denne kode:

function add_tagelm(elm, event)
{
    var oTest = elm;
    alert(oTest.nodeName+" :: "+oTest.parentNode)
    elm = get_parent(elm, 'div');
   
    pos_x = event.offsetX ? event.offsetX:event.pageX-elm.offsetLeft;
    pos_y = event.offsetY ? event.offsetY:event.pageY-elm.offsetTop;
   
    elm.innerHTML += '<table class="img_tag" style="top:'+pos_y+'; left:'+pos_x+'"><tr><td></td></tr></table>';
   
    alert(oTest.nodeName+" :: "+oTest.parentNode)
    // oTest eksisterer - men kun i hukommelsen. Det er overskrevet af et nyt billede i DOM'en
}

Bruger du i stedet DOM, ved du altid, hvad der foregår  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Validering af filnavn i formular Af Strawberry i JavaScript 6 14/04/202610:11 I går 22:15
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 19:43 Installation af Adobe Photoshop Elements 2019 Af mort1 i Billedbehandling
17/0418:29 Gendanne slettet partition overskrevet med Windows 11 Af Strawberry i Windows
17/0416:11 Samle data fra flere kolonner i 1 Af FinnLauridsen i Excel
17/0414:44 ny fjernbetjening til DVD afspiller fra 2004 Af Nette i Andet hardware
17/0412:36 Manglende kode Af Bent i Windows
White papers
Flere white papers »