[DOM_Style] JS - filter 속성 - 이미지필터효과 (= filter속성 = 필터속성) ※ 흑백이미지만들기

목차

1. filter 예제 - 이미지 필터 효과 설정
2. filter 정의
3. filter 구문
4. filter 예제 - 이미지 필터 효과 반환

filter 예제 - 이미지 필터 효과 설정

 

<button onclick="homzzang()">클릭</button><br><br>

<img id="hz" src="https://source.unsplash.com/random" alt="이미지" width="300" height="300">

<script>

function homzzang() {

  document.getElementById("hz").style.filter = "grayscale(100%)";

}

</script>

 

filter 정의

 

요소 (보통 <img>)에 대한 시각 효과 (예: 흐림/채도 등) 설정/반환.

 

---

Edge 13 + 주요 최신 브라우저 지원.

단, IE 지원 X

 

filter 구문

 

반환

object.style.filter

 

설정

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

 

---

[속성값]

 

CSS filter 속성 참고: https://homzzang.com/b/css-330

 

filter 예제 - 이미지 필터 효과 반환

 

<button onclick="homzzang()">클릭</button><br><br>

<img id="hz" src="https://source.unsplash.com/random" alt="이미지" width="300" height="300" style="filter:grayscale(100%)">

<script>

function homzzang() {

  alert(document.getElementById("hz").style.filter);

}

</script>