parent
4fb2d6f017
commit
00629d2aef
@ -1 +1,22 @@ |
|||||||
document.body.innerHTML = "Hello world!"; |
// document.body.innerHTML = "Hello world!";
|
||||||
|
|
||||||
|
let main = document.createElement('div'); |
||||||
|
main.className = 'divContainer'; |
||||||
|
document.body.appendChild(main); |
||||||
|
|
||||||
|
for(let i=0;i<2;i++) { |
||||||
|
const rowDiv=document.createElement('div'); |
||||||
|
rowDiv.className = 'rowDivContainer'+i |
||||||
|
main.appendChild(rowDiv); |
||||||
|
|
||||||
|
for(let j=0;j<2;j++) { |
||||||
|
const div=document.createElement('div'); |
||||||
|
//div.innerHTML = 'red';
|
||||||
|
div.className='divElem'; |
||||||
|
div.addEventListener("click",(e)=>{ |
||||||
|
e.target.className='colorChange'; |
||||||
|
console.log('e------->',e.target.innerHTML); |
||||||
|
}); |
||||||
|
rowDiv.appendChild(div); |
||||||
|
} |
||||||
|
} |
||||||
|
@ -0,0 +1,29 @@ |
|||||||
|
.divContainer{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.rowDivContainer0{ |
||||||
|
display: flex; |
||||||
|
border: 1px solid green; |
||||||
|
width: 50px; |
||||||
|
|
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
.rowDivContainer1{ |
||||||
|
display: flex; |
||||||
|
border: 1px solid green; |
||||||
|
width: 50px; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
|
||||||
|
.divElem{ |
||||||
|
height: 30px; |
||||||
|
width: 30px; |
||||||
|
|
||||||
|
/*border: solid green;*/ |
||||||
|
} |
||||||
|
.colorChange{ |
||||||
|
background-color: red; |
||||||
|
height: 30px; |
||||||
|
width: 30px; |
||||||
|
} |
Loading…
Reference in new issue