javaScript. CSS 관련 자바스크립트

 

원칙적으로, 자바스크립트로 CSS를 조작하는것은 지양하는 것이 맞다.

 

그러나, CSS만으로는 처리할 수 없을 때,

(예 - 리액트같은 프레임워크를 쓰거나, 스크롤 문제 해결시)

어쩔 수 없이 js로 CSS를 조작해야 하는 경우가 발생한다.

 

 

 

- 태그의 CSS를 변경

 

document.querySelector('선택자').style.display = 'inline-block';

여기서 주의할 점은

-가 들어간 속성(예>background-color)은 -를 빼고 뒤의 문자를 대문자로 바꿔준다.

(자바스크립트는 캐멀케이스 이므로)

 

+) 처음부터 -가 붙은 CSS속성 (예> -webkit) 또한 -를 제거하고 w를 대문자로 바꿈.

- 자바스크립트에서는 '-'가 빼기 연산자로 인식됨.

 

- 태그의 css 속성을 읽어옴

document.querySelector('선택자').style.fontSize = '16px';
document.querySelector('선택자').style.WebkitOverflowScrolling = 'touch'; // -webkit-overflow-scrolling

위 속성들은 getter setter가 적용된 속성이라 반대로 읽어올 수도 있다.

단, 인라인 CSS만 읽을 수 있어 잘 쓰지 않음.

 

 

___

💡  getter과 setter

- 객체의 프로퍼티는 데이터 프로퍼티 / 접근자 프로퍼티로 구분된다.

접근자 프로퍼티는 함수인데, 이 함수는 값을 획득하고(get) 설정하는(set)역할이다.

>> 그러나 이 함수는 외부코드에서 일반 프로퍼티로 보인다.

 

접근자 프로퍼티는 getter(획득자)와 setter(설정자) 메소드로 표현된다.

객체 리터럴 안에서 getter과 setter 메소드는 get과 set으로 나타낼 수 있다.

let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },

  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};

 

위 코드를 보면,

getter 메서드는 obj.propName을 사용해 프로퍼티를 읽으려 할 때 실행되고,

setter 메서드는 obj.propName = value로, 프로퍼티에 값 할당시 실행된다.

 

cf> 데이터 프로퍼티에는 value와 writable(등의 '설명자')이 존재.

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});


const object2 = Object.create(null, {
  a: {                           // prototype은 null이고, 속성들만 부여
    writable: true,
    configurable: false,
    value: 5,
  }
});

 

Object.defineProperty(객체,, 프로퍼티(수정할거),설명자) 로 할수 있고,

Object.create(prototype, 속성들(설명자포함))로도 할 수 있음.

 

 

<설명자 中>

get	속성값을 가져올때	value 관련
set	속성값을 설정할때

- 그외에도 writable, configurable 등이 존재.

 

 

___

 

 

 

getComputedStyle

 

 

위에서 언급했던 방식으로는 인라인만 읽어올 수 있으므로

 

스타일을 읽어올 때는

getComputedStyle(태그)를 사용한다.

>> getComputedStyle(document.getElementById('id'))와 같이 하면 된다.

 

 

 

❗❗ width나 height같은 속성값은 getComputedStyle말고

offsetWidth, scrollWidth, clientWidth 등으로 구할 수 있다.

 

- offsetWidth : 엘리먼트 전체 크기 (패딩, 보더, 스크롤바 포함) 
- clientWidth : 창에서 실제로 보여지고 있는 컨텐츠의 크기. (패딩 포함. / 보더,스크롤바는 X)
- scrollWidth : 보이는 것과 상관없이 실제 컨텐츠의 크기. (전체 스크롤바 ㅡ 숨겨진 영역 포함)

 

cr: https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively

 

>> 태그의 속성으로 접근하면 된다.

document.querySelector('선택자').scrollHeight;

 

 

window에는 페이지의 너비와 높이를 알려주는 inner값(innerWidth, innerHeight) 속성이 있다. 

screen에는 모니터 해상도를 알려주는 avail값(availWidth, availHeight) 속성이 있다.

 

window.inner값 (우측상단에 뜨는 inner값)

 

 

 

+) screen.height = 864이고, screen.availHeight = 824가 나왔다.

즉, 밑에 작업표시줄이 40px이고, 그걸 제외한 사용가능 height가 864-40 = 824라는 것이다.

작업표시줄

 

 

 

---

 

 

 

+) 그 외

 

태그.getBoundingClientRect()  /  태그.getClientRects()

document.querySelector('선택자').getBoundingClientRect();
// { x, y, width, height, top, right, bottom, left }

- 태그의 너비, 높이와 x,y좌표도 알려줌.

 

 

 

 

window.matchMedia()

 

window.matchMedia('(min-width: 760px)').matches // true or false

 

- 어떤 미디어쿼리가 적용되었는지 파악 가능.

- 인자로 미디어쿼리 기준을 넣어줌. (min-width: 760px)

 

>> 일치 결과에 따라 true와 false 반환함.

(조건문과 함께 사용하면 된다.)

 

 

 

 

 

 

---

REFERENCE

 

 

 

(JavaScript) CSS와 관련된 자바스크립트 - style, getComputedStyle, getBoundingClientRect, matchMedia

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!