JavaScript를 사용하여 HTML 요소에 동적 스타일 추가

26759 단어 html javascript webdev beginners

지금 제 이메일 목록을 구독하려면 http://jauyeung.net/subscribe/으로 전화하십시오.
트위터에 팔로우 해주세요.
자세한 내용은 https://medium.com/@hohanga으로 문의하십시오.
정적 웹 페이지를 동적 웹 응용 프로그램으로 바꾸는 중요한 부분은 웹 페이지의 요소의 스타일을 동적으로 바꾸는 것이다.JavaScript에서는 요소의 일부인 CSS 속성을 가져오거나 설정할 수 있는 JavaScript 속성으로 공개할 수 있습니다.
DOM 요소에는 style 객체가 있으므로 DOM 객체의 스타일을 변경할 수 있습니다.style 객체를 사용하여 텍스트 색상 변경, 배경 색상 변경, 객체 애니메이션 설정, 크기 변경, 페이지 섹션 표시/숨기기, 내용을 표시하는 팝업 상자 만들기 등 일부 내용을 변경할 수 있습니다.style은 다른 DOM 객체와 마찬가지로 여러 가지 등록 정보와 방법을 사용하여 스타일을 설정할 수 있습니다.이 속성들은 모두 CSS 속성입니다. 다만 모든 CSS 속성은 CSS에서 사용하는 꼬치 대소문자로 변환됩니다.style 대상은 원소의 내연 스타일을 되돌려줍니다.원소를 원하는 대로 보이려면 선택한 원소의 내연 스타일 이외의 CSS를 고려해야 합니다. 예를 들어 외부 CSS 파일과 style 원소의 스타일을 고려해야 합니다.
다음은 일반적인 style 객체 속성 및 CSS 등가입니다.

backgroundColor: CSS의background-color 속성과 같이 요소

의 배경색을 가져오거나 설정합니다

borderWidth: CSS의border width 속성과 동일하며, 이 속성은 요소

의 테두리를 가져오거나 설정합니다.

fontFamily: CSS의 font family 속성과 동일하며, 이 속성은 요소

의 글꼴을 가져오거나 설정합니다.

lineHeight: CSS의 line height 속성과 동일하게 요소

의 행 사이의 높이를 가져오거나 설정합니다.

textAlign: CSS의 텍스트 정렬 속성과 동일하게 요소

의 수평 정렬을 가져오거나 설정합니다.
요소의 모든 CSS 속성을 가져오려면 window. getComputedStyle 방법을 사용하여 요소의 모든 CSS 속성을 가져와야 합니다.여기에는 내장된 모든 CSS, 외부 CSS 및 style 태그의 CSS가 포함됩니다.이렇게 하면 모든 CSS가 가져오고 실제로 요소의 올바른 CSS 스타일이 포함된 객체로 그룹화됩니다.우리는 그것을 다음과 같이 사용할 수 있다.index.html에 추가된 내용은 다음과 같습니다.

<html>  
  <head>  
    <title>Get Styles</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <h1 id="title">Title</h1>  
    <h1>Styles</h1>  
    <ul id="styles-list"></ul>  
    <script src="script.js"></script>  
  </body>  
</html>

script.js년에 우리는 다음과 같이 말했다.

window.onload = () => {  
  const title = document.getElementById("title");  
  const stylesList = document.getElementById("styles-list");  
  const titleStyles = window.getComputedStyle(title);  
  Object.keys(titleStyles).forEach(key => {  
    const li = document.createElement("li");  
    if (isNaN(+key)) {  
      li.innerHTML = `${key}: ${titleStyles[key]}`;  
      stylesList.appendChild(li);  
    }  
  });  
};

styles.css에 추가된 내용은 다음과 같습니다.

#title {  
  color: white;  
  background-color: lightblue;  
  font-family: Arial;  
  margin-bottom: 20px;  
  font-size: 18px;  
  font-family: monospace;  
}

보시다시피 ID가 title인 요소의 전체 스타일 리스트가 있습니다.아래로 스크롤하면 fontFamily, fontSize 등이 styles.css에서 설정한 것과 일치합니다.

풍격을 바꾸다

요소의 스타일을 변경하려면 일반 함수를 사용하여 getElementById과 같은 요소를 가져온 다음 style 객체의 속성을 다음과 같이 설정합니다.

document.getElementById('square').style.padding = '10px';

위의 예에서 우리는 사각형 요소를 얻어 ID가 square인 요소의 충전을 10px로 설정했다.스타일을 적용하려면 마지막으로 px이 있어야 합니다.

JavaScript를 사용하여 스타일 애니메이션 설정하기

JavaScript에서 요소의 애니메이션을 설정하려면 이전과 같은 CSS 스타일 변경 사항을 적용할 수 있습니다.
스타일 변경이 실행되는 타이머 지연만 추가할 수 있기 때문에, 요소의 스타일이 적용되고 있음을 볼 수 있습니다.JavaScript에서 코드의 실행을 지연시키기 위해 setTimeout 함수를 사용할 수 있습니다.
예를 들어, 만약 우리가 상자를 이동하고 싶다면, 우리는 아래의 코드를 작성할 수 있다.index.html에 추가된 내용은 다음과 같습니다.

<html>  
  <head>  
    <title>Animation</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <div id="box"></div>  
    <script src="script.js"></script>  
  </body>  
</html>

그리고 script.js에 다음과 같은 내용을 추가했습니다.

const animate = () => {  
  const box = document.getElementById("box");  
  for (let i = 0; i < 10000; i++) {  
    (i => {  
      setTimeout(() => {  
        const left = window.getComputedStyle(box).left;  
        box.style.left = `${(+left.replace("px", "") + i * 2) %  
          window.innerWidth}px`;  
      }, 1000);  
    })(i);  
  }  
};

window.onload = () => {  
  animate();  
};

styles.css에 추가된 내용은 다음과 같습니다.

#box {  
  background-color: lightcoral;  
  width: 50px;  
  height: 50px;  
  position: absolute;  
  top: 50px;  
  left: 10px;  
}

ID가 setTimeout인 요소의 스타일 변경 실행을 1000ms(1초) 지연시키는 데 box 함수를 사용합니다.setTimeout 함수에 전달되는 함수에서 기존 left CSS 속성을 획득한 다음 left을 추가하여 i*2 속성을 설정합니다.그리고 우리는 나머지를 window.innerWidth으로 나눈다.이렇게 하면 브라우저 창에서 상자를 좌우로 이동할 수 있습니다.

롤링 효과

스크롤 효과는 요소 위에 마우스를 놓으면 이미지가 변하고 같은 요소에서 마우스를 놓으면 다른 이미지가 표시되는 동적 효과입니다.
사용자가 마우스를 원소 위에 놓은 다음 원소에서 마우스를 옮길 때, 이것은 서로 다른 정보를 표시하는 흔한 효과이다.그것도 다른 종류의 스위치에 사용된다.효과를 만들려면 마우스를 위로 가져가거나 마우스를 끌 때 다른 내용이 표시되도록 이미지 요소를 수정해야 합니다.
이미지 객체에는 다음과 같은 속성이 있습니다.

alt - 이미지의alt 속성

complete-true 이미지 로드가 완료되면

height - 이미지 높이

isMap - 이미지가

의 일부인지 여부를 나타냅니다.

naturalHeight - 이미지의 원래 높이

naturalWidth - 이미지의 원래 너비

src - 이미지

의 src 속성

width - 이미지 요소

의 너비
뒤집기 효과를 만들려면 다음과 같은 동작을 수행할 수 있습니다.index.html에 추가된 내용은 다음과 같습니다.

<html>  
  <head>  
    <title>Get Styles</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <img src="images/dog1.jpg" id='dog' />  
    <script src="script.js"></script>  
  </body>  
</html>

그리고 script.js에서 우리는 다음과 같이 주장했다.

window.onload = () => {  
  const dog = document.getElementById("dog");  
  dog.addEventListener("mouseover", () => {  
    if (dog.src.includes("images/dog1.jpg")) {  
      dog.src = "images/dog2.jpg";  
    } else {  
      dog.src = "images/dog1.jpg";  
    }  
  }); 

  dog.addEventListener("mouseout", () => {  
    if (dog.src.includes("images/dog1.jpg")) {  
      dog.src = "images/dog2.jpg";  
    } else {  
      dog.src = "images/dog1.jpg";  
    }  
  });  
};

마지막으로 styles.css에서 우리는 다음과 같이 말했다.

#dog {  
  width: 300px;  
}

우리는 그림을 300픽셀 너비로 축소할 것이다.그리고 script.js에서 마우스를 그림에 놓을 때 다른 그림으로 전환합니다.
그런 다음 마우스를 요소 밖으로 이동하면 다른 이미지로 전환합니다.그림 안팎에서 마우스를 왔다 갔다 할 때, 이 두 이벤트 처리 프로그램은 함께 스크롤 효과를 만들 것입니다.

성장 이미지

이미지 위에 마우스를 올려 놓을 때 이미지를 확대한 다음 마우스를 이미지 외부로 이동하면 이미지가 원래 크기로 축소되므로 이미지의 mouseover과 mouseout 이벤트만 처리하면 됩니다.
마우스를 그 위에 놓으면 그림의 크기가 커집니다.마우스를 옮겼을 때, 우리는 그것을 원래의 크기로 축소했다.
이를 위해 index.html에 다음과 같은 내용이 추가되었습니다.

<html>  
  <head>  
    <title>Get Styles</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <img src="images/dog.jpg" id='dog' />  
    <script src="script.js"></script>  
  </body>  
</html>

그리고 script.js에서 우리는 다음과 같이 주장했다.

window.onload = () => {  
  const dog = document.getElementById("dog");  
  dog.addEventListener("mouseover", () => {  
    dog.style.width = "500px";  
  }); 

  dog.addEventListener("mouseout", () => {  
    dog.style.width = "300px";  
  });  
};

styles.css에 추가된 내용은 다음과 같습니다.

#dog {  
  width: 300px;  
}

script.js의 코드는 우리가 방금 설명한 것과 완전히 같다.사용자가 마우스를 그림에 걸면 그림 크기를 500px로 변경하고, 마우스를 옮길 때 그림은 300px로 축소됩니다.

슬라이드 쇼

우리는 이미지를 조작해서 간단한 슬라이드를 만들 수 있다.우리가 해야 할 일은 자바스크립트에 내장된 setInterval 함수를 사용하여 설정된 시간 간격 내에 그림을 회전시키는 것이다.index.html에는 다음과 같은 기능이 있습니다.

<html>  
  <head>  
    <title>Get Styles</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <img src="images/dog1.jpg" id='dog' />  
    <script src="script.js"></script>  
  </body>  
</html>

그리고 script.js에서 우리는 다음과 같이 주장했다.

window.onload = () => {  
  const dog = document.getElementById("dog");  
  const dogImgPaths = ["images/dog1.jpg", "images/dog2.jpg", "images/dog3.jpg"];  
  let index = 0;  
  setInterval(() => {  
    index = (index + 1) % dogImgPaths.length;  
    dog.src = dogImgPaths[index];  
  }, 3000);  
};

styles.css년에 우리는 다음과 같이 주장했다.

#dog {  
  width: 300px;  
}

우리가 하는 일은 dogImgPaths에 그림의 경로를 설정하여 3초에 한 번씩 우리가 소장하고 있는 다른 그림을 회전시키는 것이다.이미지를 회전하려면 index을 1로 늘린 다음 dogImgPaths.length을 추출하면 됩니다.이렇게 하면 index은 항상 0과 2 사이에 있기 때문에 우리는 존재하지 않는 이미지를 얻으려고 하지 않는다.

편리한 애니메이션 기능

JavaScript에는 CSS에서 키프레임을 정의한 다음 JavaScript를 사용하여 키프레임의 변경 사항을 제어하여 애니메이션을 만들 수 있는 애니메이션 속성이 있습니다.
JavaScript는 애니메이션을 제어하는 다음과 같은 속성을 제공합니다.

animation - animationPlayState을 제외한 모든 애니메이션 속성 가져오기 또는 설정하기

animationDelay - 애니메이션 시작 전 지연 시간 수령 또는 설정

animationDirection - 애니메이션이 실행되는 방향 얻기 또는 설정하기

animationDuration - 애니메이션

길이 획득 또는 설정

animationFillMode - 애니메이션이

을 실행하지 않는 경우 발생

animationIterationCount - 애니메이션 재생 횟수

얻기 또는 설정

animationName - 규칙

의 CSS 키프레임을 사용하여 애니메이션 목록 가져오기 또는 설정하기

animationTimingFunction - 애니메이션의 일정 시간 실행 속도를 가져오거나 설정합니다.

animationPlayState - 애니메이션이

실행 중인지 확인 또는 설정
CSS에서 애니메이션의 키프레임을 설정하려면 keyframes 속성을 사용합니다.
JavaScript를 사용하여 간단한 애니메이션을 만들고 요소의 스타일을 가져오고 변경하는 것은 어렵지 않습니다.우리는 코드를 너무 많이 쓰지 않는 상황에서 많은 일을 할 수 있다.
만약 우리가 setTimeout과 setInterval 타이머 함수를 사용하여 스타일의 실행을 지연시키거나 코드를 변경할 때 스타일의 실행을 반복한다면 애니메이션은 매우 쉽다.

Reference

이 문제에 관하여(JavaScript를 사용하여 HTML 요소에 동적 스타일 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/add-dynamic-styling-to-html-elements-with-javascript-10mj

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

얼굴 필터-기하학적 변환 간단한 코드

AlmaLinux 설치

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다