duda ejercicio
Publicado por jmf (29 intervenciones) el 24/11/2016 16:19:15
Buenas
Tengo que hacer este ejercicio
2 Programa las funciones necesarias para conseguir qué:
2.1 Cuando se clique sobre #addDiv se cree un DIV, se pida al usuario un texto y se añada dentro de #domNodes con el texto indicado por el usuario. A demás el nuevo DIV creado debe ser de la clase .addDiv.
2.2 Cuando se clique sobre #addSpan se cree un SPAN, se pida al usuario un texto y se añada el nuevo SPAN dentro de #domNodes con el texto indicado por el usuario. A demás el SPAN creado ha de ser de la clase .addSpan
Este es el codigo HTML y CSS
CODIGO CSS
Tengo que hacer este ejercicio
2 Programa las funciones necesarias para conseguir qué:
2.1 Cuando se clique sobre #addDiv se cree un DIV, se pida al usuario un texto y se añada dentro de #domNodes con el texto indicado por el usuario. A demás el nuevo DIV creado debe ser de la clase .addDiv.
2.2 Cuando se clique sobre #addSpan se cree un SPAN, se pida al usuario un texto y se añada el nuevo SPAN dentro de #domNodes con el texto indicado por el usuario. A demás el SPAN creado ha de ser de la clase .addSpan
Este es el codigo HTML y CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<article class="article_main_web">
<header class="header_article">
<hgroup>
<h2>DOM!!</h2>
</hgroup>
</header>
<nav id="selectOperation">
<div id="addDiv"> NEW ADD DIV </div>
<div id="addSpan"> NEW ADD SPAN </div>
<div id="setContentPrev"> NEW DIV SET CONTENT PREVIOUS ELEMENT </div>
<div id="delPrevNode"> NEW DIV DELETE PREVIOUS ELEMENT </div>
<div id="delNextNode"> NEW DIV DELETE NEXT ELEMENT </div>
<div id="addAttr"> NEW DIV SET ATTRIBUTE</div>
<div id="delAllType"> NEW DIV REMOVE ALL TYPE </div>
<div id="replaceMeForFirst"> NEW DIV REPLACE ME </div>
</nav>
<h3>!!ADD DIVS !!</h3>
<section id="domNodes">
</section>
</article>
CODIGO CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
#selectOperation>div{
vertical-align: middle;
border: 1px solid #99CCFF;
display: inline-block;
margin: 5px;min-height: 30px;
min-width: 75px;
padding:2px;padding-top: 4px;
vertical-align: middle;
cursor: pointer;}#selectOperation>div:hover{
box-shadow: -1px 0 10px #99CCFF;
}#domNodes{
border:1px solid yellow;}#domNodes h3{
text-align: center;
}#domNodes>div{
border:1px solid yellow; margin: 5px;min-height: 50px;
width: 75px;display:inline-block;
vertical-align: top;
}#domNodes> span{
border:1px solid red; margin: 5px;min-height: 30px;
min-width: 30px;
display:inline-block;
vertical-align: top;
}#domNodes{
vertical-align: top;
}.addDiv{
border-color: #F8AC00;
border-radius: 15%;
}.addSpan{
border-color:#008000;
background-color: #ADFF2F;
}.setContentPrev{
border-color:#FFCC99;
}.delPrevNode{
border-color:#A9ED86;
}.delNextNode{
border-color:#ADFF2F;
}.addAttr {
border-color:red;
}.delAllType{
border-color:#9966FF;
}.replaceMeForFirst {
background-color: sandybrown;
}Valora esta pregunta
0