JS - 자바스크립트(javascript) 만으로 background (이미지, 위치, 반복, 모드 등등) CSS 속성 조작하기

▶ 프로퍼티(속성)

💻 CSS 프로퍼티(속성) / JavaScript 프로퍼티(속성) 

CSS 프로퍼티 (속성)	JavaScript 프로퍼티 (속성)
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
background-blend-mode	backgroundBlendMode
background-origin	backgroundOrigin

 

▶ CSS 조작하기

// 태그요소
let element = document.getElementById('태그의 id 값');

 

💻 width , height 값 조작 

element.style.width = '250px';
element.style.height = '250px';

 

💻 background 조작 

// background 
element.style.background = "url(이미지 주소) no-repeat";

 

💻 background-attachment 조작 

값	설명
scroll	기본값입니다. 배경 이미지는 페이지와 함께 스크롤됩니다.
fixed	배경 이미지는 페이지와 함께 스크롤되지 않습니다
local	배경 이미지는 요소의 내용과 함께 스크롤됩니다.

/*
     ex) scroll | fixed | local
*/
element.style.backgroundAttachment = "fixed";

 

💻 background-color 조작 

/*
     ex) red | blue | #ff3f33
*/
element.style.backgroundColor = "blue";

 

 

반응형

---

 

 

 

💻 background-image 조작 

element.style.backgroundImage = "url(이미지 주소)";

 

💻 background-position조작 

값	설명
left top left center left bottom right top right center right bottom center top center center center bottom	하나의 키워드만 지정하면 다른 값은 "center"가 됩니다. ex) left 이렇게 하나만 작성하면 자동적으로 나머진 center가 적용됨
x% y%	첫 번째 값은 수평 위치이고 두 번째 값은 수직입니다.  왼쪽 상단 모서리는 0% 0%입니다.  오른쪽 하단 모서리는 100% 100%입니다.  하나의 값만 지정하면 다른 값은 50%가 됩니다.  기본값: 0% 0%
xPos yPos	첫 번째 값은 수평 위치이고 두 번째 값은 수직입니다.  왼쪽 상단 모서리는 0 0입니다.  단위는 픽셀(0px 0px) 또는 기타 CSS 단위가 될 수 있습니다.  하나의 값만 지정하면 다른 값은 50%가 됩니다.  %와 위치를 혼합할 수 있습니다.

element.style.backgroundPosition = "left top";
element.style.backgroundPosition = "50% 20%";
element.style.backgroundPosition = "100px 250px";

 

💻 background-repeat 조작 

값	설명
repeat	기본값입니다 배경 이미지는 수직 및 수평으로 반복됩니다. 마지막 이미지가 맞지 않으면 잘립니다.
repeat-x	가로로만 반복 됩니다.
repeat-y	세로로만 반복 됩니다.
no-repeat	반복하지 않습니다.
space	배경 이미지는 클리핑 없이 최대한 반복됩니다. 첫 번째와 마지막 이미지는 요소의 양쪽에 고정되고 공백은 이미지 사이에 고르게 분포됩니다.
round	배경 이미지는 공간을 채우기 위해 반복되고 찌그러지거나 늘어날 수도 있습니다.

element.style.backgroundRepeat = "no-repeat";

 

💻 background-blend-mode 조작 

// normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity

element.style.backgroundBlendMode = "darken";

 

💻 background-origin 조작 

값	설명
padding-box	기본값.  배경 이미지는 패딩 가장자리의 왼쪽 상단 모서리에서 시작됩니다.
border-box	배경 이미지는 테두리의 왼쪽 상단 모서리에서 시작됩니다.
content-box	배경 이미지는 콘텐츠의 왼쪽 상단에서 시작됩니다.

// padding-box | border-box | content-box|

element.style.backgroundOrigin = "border-box";