본문 바로가기
UI개발

DOM - Element 노드 지오메트리와 스크롤링 지오메트리 / 인라인 스타일

💜꿀고구마💜 2016. 9. 22. 15:44

Element 노드 크기, 오프셋, 스크롤링 개요

HTML 문서를 웹 브라우저에서 볼 때, DOM 노드가 해석되어 시각적인 모양으로 그려진다.

노드는 브라우저에서 볼 수 있는 시각적인 표현 형태를 가지고 있다.

 

 

offsetParent를 기준으로 element의 offsetTop 및 offsetLeft 값을 가져오기

offsetTop 및 offsetLeft 속성을 사용하면, offsetParent로부터 element노드의 오프셋 픽셀 값을 가져올 수 있다.

element의 바깥쪽 좌상단 경계로부터 offsetParent의 안쪽 좌상단 경계까지의 거리를 픽셀로 제공해준다.

 

offsetParent의 값은 가장 가까운 부모 element 중에서 css 위치 값이 static이 아닌 element를 검색하여 결정된다.

아무것도 발견되지 않으면 <body>나 document에 해당하는 것이 된다.

 

<style>
    #blue {width:50px;height:50px;background-color:blue;margin:25px;padding:25px}
    #red {width:50px;height:50px;background-color:red}
</style>

<div id="blue">
    <div id="red"></div>
</div>

<script>
    var div = document.querySelector("#red");
    console.log(div.offsetLeft); // 50
    console.log(div.offsetTop); // 50
    console.log(div.offsetParent); // <body></body>
</script>

<style>
    #blue {position:relative;width:50px;height:50px;background-color:blue;margin:25px;padding:25px}
    #red {width:50px;height:50px;background-color:red}
</style>

<div id="blue">
    <div id="red"></div>
</div>

<script>
    var div = document.querySelector("#red");
    console.log(div.offsetLeft); // 25
    console.log(div.offsetTop); // 25
    console.log(div.offsetParent); // <div id="blue"></div>
</script>

 

 

getBoundingClinetRect()

뷰포트의 좌상단 끝을 기준으로 엘리먼트가 브라우저에서 그려질 때 바깥쪽 테두리 위치를 얻을 수 있다.

 

<style>
    #blue {width:50px;height:50px;border:10px solid gray;background-color:blue;margin:10px;padding:10px}
</style>


<div id="blue"></div>

<script>
    var div = document.querySelector("#blue");
    var divR = document.querySelector("#blue").getBoundingClientRect();
    console.log(divR.top, divR.right, divR.bottom, divR.left); // 테두리 오프셋 : 10 100 100 10
     console.log(divR.width, divR.height); // 크기 (테두리 + 패딩 + 내용) : 90 90
    console.log(div.offsetWidth, div.offsetHeight); // 크기 (테두리 + 패딩 + 내용) : 90 90
    console.log(div.clientWidth, div.clientHeight); // 크기 (패딩 + 내용) : 70 70
</script>

 

 

elementFromPoint()

문서의 특정 지점에서 최상단 element에 대한 참조를 얻을 수 있다.

<style>
    div {position:absolute;top:50px;left:50px;width:100px;height:100px;background-color:pink}
</style>

<div id="bottom"></div>
<div id="top"></div>

<script>
    console.log(document.elementFromPoint(50,50)); 
    // <div id="top"></div> z-index 설정이 없는 경우 순서상 마지막인 것이 선택됨
</script>

 

 

scrollWidth, scrollHeight를 사용하여 스크롤될 element의 크기 얻기

스크롤될 노드의 높이와 너비를 제공해준다.

<style>
    div {overflow:auto;width:100px;height:100px;background-color:pink}
    div p {width:1000px;height:1000px}
</style>

<div><p></p></div>

<script>
    var div = document.querySelector("div");
    console.log(div.scrollWidth, div.scrollHeight); // 1000 1000 스크롤될 엘리먼트의 크기
    div.scrollTop = 500; div.scrollLeft = 500; // 스크롤될 픽셀 설정
    console.log(div.scrollTop, div.scrollLeft); // 500 500
</script>

 

 

scrollIntoView()

선택된 노드로 스크롤

<style>
    div {overflow:auto;width:100px;height:100px;background-color:pink}
</style>

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ul>
</div>

<script>
    document.querySelector("ul").children[4].scrollIntoView(true); // <li>5</li>로 스크롤
</script>

 

 

style attribute 개요

 

<style>
    div {width:100px;height:100px;background-color:pink}
</style>

<div></div>

<script>
    var divStyle = document.querySelector("div").style;
    console.log(divStyle); // {0="width:100px",...} 출력

    // 설정
     divStyle.backgroundColor = "red";
    divStyle.border = "1px solid black";
    divStyle.width = "200px";
    divStyle.height = "200px";

    // 가져오기
     console.log(divStyle.backgroundColor);
    console.log(divStyle.border);
    console.log(divStyle.width);
    console.log(divStyle.height);

    // 제거
     divStyle.backgroundColor = "";
    divStyle.border = "";
    divStyle.width = "";
    divStyle.height = "";
</script>

 

style 개체에 포함된 속성명에는 속성명에서 사용되는 일반적인 하이픈이 포함되지 않는다.

하이픈을 제거하고 카멜케이스를 사용하면 된다.

font-size = fontSize

 

측정 단위가 필요한 경우 적절한 단위를 포함시켜야 한다.

style.width = "300px" 

 

element노드의 개별 css 속성을 조작하는데 사용되는 

setPropertyValue(propertyName), getPropertyValue(propertyName,value), removeProperty() 메서드에 대한

접근도 제공해준다.

<style>
    div {width:100px;height:100px;background-color:pink}
</style>

<div></div>

<script>
    var divStyle = document.querySelector("div").style;
    console.log(divStyle);

    // 설정
    divStyle.setProperty("background-color","orange");
    divStyle.setProperty("width","200px");

    // 가져오기
    console.log(divStyle.getPropertyValue("background-color")); // orange
    console.log(divStyle.getPropertyValue("width"));    // 200px

    // 제거
    divStyle.removeProperty("background-color");
    divStyle.removeProperty("width");
</script>

setProperty()와 getPropertyValue() 메서드에 전달되는 속성명은 하이픈이 포함된 css 속성명을 사용한다.

backgroundColor -> background-color 

 

 

모든 인라인 css 속성 가져오기, 설정, 제거

cssText, getAttribute() alc setAttribute() 메서드를 사용해서 설정, 제거할 수 있다.

<style>
    div {width:100px;height:100px;background-color:pink}
</style>

<div></div>

<script>

    var div = document.querySelector("div");
    
    var divStyle = div.style;
    divStyle.cssText = "background-color:orange;border:1px solid green"; // 설정
    console.log(divStyle.cssText); // 가져옴
    divStyle.cssText=""; // 제거
    
    div.setAttribute("style","background-color:orange;border:1px solid green"); // 설정
    console.log(div.getAttribute("style")); // 가져옴
    div.removeAttribute("style"); //제거
    
</script>

 

 

getComputedStyle()을 사용하여 element의 계산된 스타일(계층화된 것을 포함한 실제 스타일) 가져오기.

엘리먼트의 계층화된 css(즉 인라인 스타일시트, 외부 스타일시트, 브라우저 스타일시트가 계층화 된 것)를 가져오려면 getComputedStyle()을 사용한다.

<style>
    div {width:100px;height:100px;background-color:pink;border:1px solid hotpink}
</style>

<div style="background-color:lightcoral;border:1px solid yellowgreen"></div>

<script>

    var div = document.querySelector("div");
    console.log(window.getComputedStyle(div).backgroundColor); // rgb(240, 128, 128) , lightcoral
    console.log(window.getComputedStyle(div).border);   // 1px solid rgb(154, 205, 50) , yellowgreen
    console.log(window.getComputedStyle(div).width, window.getComputedStyle(div).height);    // 100px 100px

</script>

 

 

class 및 id attribute를 사용하여 element의 css속성 적용, 제거하기

인라인 스타일시트나 외부 스타일시트에 정의된 스타일 규칙은 class 및 id attribute를 사용하여 element의 추가하거나 제거할 수 있는데 가장 일반적인 패턴이다.

<style>
    .foo {width:100px;height:100px;background-color:pink}
    #bar {border:10px solid orange;margin:10px}
</style>

<div></div>

<script>

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

    // 설정
    div.setAttribute("id","bar");
    div.classList.add("foo");

    // 제거
    div.removeAttribute("id");
    div.classList.remove("foo");

</script>

 

'UI개발' 카테고리의 다른 글

자바스크립트 최대값, 최소값 찾기  (0) 2016.10.25
DOM - 텍스트 노드  (0) 2016.10.17
DOM - Element 노드 / Element 노드 선택  (0) 2016.09.19
DOM - Document 노드  (0) 2016.09.19
DOM - 노드 개요  (0) 2016.09.11

'UI개발' Related Articles

티스토리툴바