Javascript에서 동적으로 CSS를 추가하는 방법은 무엇입니까?
3525 단어 cssbeginnersjavascriptwebdev
이전 섹션에서 매우 간단한 방법으로 dom을 조작하는 방법을 배울 수 있었습니다.
마찬가지로 간단한 HTML 요소를 만들고 스크립트가 로드될 때 요소에 클래스를 추가하는 스크립트를 만들었습니다.
우리는 두 가지 방법으로 이를 수행했습니다. jQuery(아직 살아 있고 최소한 기본 사항은 알 가치가 있습니다!), 두 번째로 배운 것은 순수 JS를 사용한 DOM 조작입니다.
이 섹션에서는 좀 더 고급으로 이동합니다.
이벤트와 관련된 DOM 조작을 수행하는 방법을 배웁니다. 이 경우 버튼에 추가한 onclick 메서드를 사용합니다.
함수에 "id"매개 변수를 추가하여 선택해야 하는 요소를 지정할 수 있으며 요소에 추가해야 하는 클래스 이름을 지정할 수 있습니다.
내가 만든 코드 예제를 살펴보세요.
여기에 ID가 "hero"인 요소와 "onclick"속성으로 "addClass"기능을 실행할 수 있는 버튼이 있습니다.
다음으로 "id"와 "className"을 매개 변수로 사용할 수 있는 "addClass"라는 함수를 지정한 js 스크립트가 있습니다.
함수 내에서 우리는 버튼에 전달한 id를 가진 요소를 찾기 위해 DOM을 반복하고 "addClass"함수를 실행할 때 추가한 클래스 이름으로 class 속성을 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn coding on Duomly.com</title>
</head>
<body>
<div id="hero">
This is hero element
</div>
<button onclick="addClass('hero', 'rounded')">Add class</button>
<script>
function addClass(id, className) {
const element = document.getElementById(id);
element.setAttribute("class", className);
}
</script>
</body>
</html>
읽어 주셔서 감사합니다,
듀옴리의 라덱
Reference
이 문제에 관하여(Javascript에서 동적으로 CSS를 추가하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/duomly/how-to-add-css-dynamically-in-javascript-4636텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
