CSS 값을 동적으로 변경

15519 단어 beginnerstypescriptbeginner2advanced100daysofcode
이 문서는 #beginner2advanced 챌린지의 일부로 이repository의 모든 앱을 만드는 것을 목표로 하는 열 번째 응용 프로그램으로 작성되었습니다.
HTMLElement.style는 이 도전을 하는 저에게 가장 중요한 개념이지만 이에 대해 갈 수 있는 방법은 무수히 많습니다.
HTMLElement.style는 읽기 전용으로 간주되지만 속성에 문자열을 할당하여 인라인 스타일을 설정할 수 있지만 요소에 이미 있을 수 있는 인라인 스타일을 재정의합니다.

특정 스타일을 업데이트하거나 변경하려면 다음과 같이 특정 스타일 속성을 직접 업데이트할 수 있습니다.

HTMLElement.style.background = "#000"


응용 프로그램의 최종 결과는 다음과 같습니다.



먼저 간단한 HTML 및 CSS 파일을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dynamic CSS variables</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="testuser">
    <p class="bold">Test User:</p>
    <p><span class="bold">id</span>: 123</p>
    <p><span class="bold">password</span>: password</p>
  </div>
  <input id="id" type="text" placeholder="Enter ID" />
  <input id="password" type="text" placeholder="Enter Password" />
  <div class="buttons">
    <button id="login">Login</button>
    <button id="cancel">Cancel</button>
  </div>
  <script src="./main.js"></script>
</body>
</html>


그리고 CSS 파일:

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
  gap: 50px;
}

input {
  width: 300px;
  height: 50px;
  text-align: center;
  border-radius: 15px;
  border: 1px solid #000;
}

button {
  border: 1px solid #000;
  height: 50px;
  width: 145px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  transform: scale(1.1);
}

.buttons {
  width: 300px;
  display: flex;
  justify-content: space-between;
}

.testuser {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.167);
  padding: 10px;
  width: 200px;
}

.bold {
  font-weight: bold;
  text-decoration: underline;
}


그런 다음 JavaScript 파일:

const idInput = document.getElementById("id");
const passwordInput = document.getElementById("password");
const loginButton = document.getElementById("login");
const cancelButton = document.getElementById("cancel");
const testUser = {
    id: "123",
    password: "password",
};
loginButton === null || loginButton === void 0 ? void 0 : loginButton.addEventListener("click", (e) => {
    if (idInput.value.trim() === "") {
        idInput.style.background = "lightyellow";
    }
    else if (idInput.value !== testUser.id) {
        idInput.style.background = "#e6adad";
        console.log("here");
    }
    if (passwordInput.value.trim() === "") {
        passwordInput.style.background = "lightyellow";
    }
    else if (passwordInput.value !== testUser.password) {
        passwordInput.style.background = "#e6adad";
    }
});
cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.addEventListener("click", () => {
    passwordInput.style.background = "white";
    idInput.style.background = "white";
});


코드에 대한 링크는 여기에서 찾을 수 있습니다: https://github.com/zt4ff/app-ideas/tree/main/beginners/dynamic-css-variable

다른 사람들이 찾아서 참여할 수 있도록 저장소에 별표를 남겨주세요.
Express.js TypeScript와 React TypeScript 프로젝트 만들기
중요한 자바스크립트 개념

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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