초기값상태 불러오기getComputedStyle / 엘리먼트 객체사용 appendChild

모든 CSS 초기상태 값불러와서 특정 속성값만 추출 

• var box = boxes[0];//왼쪽좌표위치 0, 원래있던 위치에서부터 증가하려면 ?
• let boxStyle = window.getComputedStyle(box);
• var left = parseInt(boxStyle.getPropertyValue('left'));//현재위치

Window.getComputedStyle()

Javascript에서 태그 추가하기 (엘리먼트 추가하기)

1. element 객체 생성 : var img = document.createElement("img") 
2. element 객체속성 설정 : img.src="/images/1.jpg"
3. element 객체를 문서에 추가하기 : container.appendChild(img)

Document.createElement() ->window.document.creatElement() 앞에 윈도우가 생략된것.

Node.appendChild()

 

초기상태값 불러오기 

 let boxStyle = window.getComputedStyle(box);

The getComputedStyle() method gets all the actual (computed) CSS property and values of the specified element.

 

left를 0으로초기화했었다. 원래 있었던위치에서 부터증가하려면 ?

CSS에서 left값을 70px설정했어도 자바스크립트는 불러올 수 없다.

getComputedStyle(box)를 통해 box의 모든 css속성을 가져온다.

클릭해도 위치값이 안나온다.

CSS값이 아니라 박스가 가지고있는 스타일속성을 갖는 객체를 만든다 ->boxStyle

boxStyle.getPropertyValue('left') : 스타일 속성중 특정  속성값가져오기.

left 의 값인 70을 가져온다.

developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

 

boxStyle의 속성중 특정속성만 원하면 getPropertyValue

  var left = boxStyle.getPropertyPriority("left");

문자열을 정수로 바꿀때 : parseInt( ) 숫자뒤의 문자를 없애준다.

parseInt () 앞에숫자만 남기고 숫자로 바꾸어준다.

left의 값 "70px"를 숫자로 바꿔준다.

 

div box1이 원래 위치에서부터 움직인다.

// ex4.css 속성 다루기
window.addEventListener("load",function(){
    // var section = document.getElementById("ex3");
    var section = document.querySelector("#ex4");

    var container = section.querySelector(".container");//id인지 class인지 표기
    var boxes = section.querySelectorAll(".box");//모두선택
    var button = section.querySelector("input[value='click']");
    
    button.onclick = function(){
        var box = boxes[0];//왼쪽좌표위치 0, 원래있던 위치에서부터 증가하려면 ?
        let boxStyle = window.getComputedStyle(box);

        var left = parseInt(boxStyle.getPropertyValue('left'));//현재위치
        var tid = window.setInterval(function(){
            
            left++;
            box.style.left = left + "px"; 
            if(left==400){
                clearInterval(tid);

            }

        },17);
    };
});

Node타입

• 노드 :공통
• 엘리먼트객체 : 태그 추가
• 텍스트노드객체 : 텍스트

우리가 사용하는객체들은 다큐먼트에 담겨있다.

HTML내용을읽어서 메모리에올린것

노드는 마디를 의미, 메모리에올라간게 노드 객체

-엘리먼트노드객체

-커멘트노드객체

-텍스트노드객체

엔티티 : 대신사용하는키워드

엔티티레퍼런스 : 엔티티를 사용할 수있게금 해주는 레퍼런스

엔티티사용

엘리먼트 객체사용

Javasctrip에서 이미지 추가

 

태그를 html에서 얻어오는작업말고 추가할 수가 있다.

1. element 객체 생성 : var img = document.createElement("img") 

2. element 객체속성 설정 : img.src="/images/1.jpg"

3. element 객체를 문서에 추가하기 : container.appendChild(img)

추가버튼을 누를때마다 이미지가 추가

Javascript에서 div태그추가

 

1. 엘리먼트 객체 생성

var div = document.createElement("div");

 

2. 엘리먼트객체 속성 설정

       div.style["background-color"]= "blue";

        div.style.backgroundColor = "blue";

        div.style.width = "100px";

        div.style.height = "100px";

        div.style.borderRadius = "50px";

 

3.엘리먼트객체 추가 

container.appendChild(div);