JS 콘솔 출력이 비어 있고 스타일 수정이 유효하지 않은 이유는 무엇입니까? 그것을 해결하는 방법?

JavaScript 콘솔 출력 빈의 실패 및 스타일 수정 문제 해결 및 해결

JavaScript 코드에서 요소의 top 속성 값을 수정하려고하면 콘솔 출력이 비어 있고 일반적으로 요소 스타일에 액세스하고 수정하는 잘못된 방법으로 인해 수정이 잘못되었습니다. 문제는 CSS 스타일 시트에 정의 된 스타일을 조작하기 위해 element.style.top 직접 사용하는 것일 수 있습니다. element.style.top 요소의 인라인 스타일에만 작동하며 외부 스타일 시트 또는 내부 스타일 시트를 통해 설정된 스타일을 수정할 수 없습니다.

예를 들어, .sidebar_right ul 요소의 top 속성이 CSS 스타일 시트를 통해 정의되면 sidebarright.style.top 은 빈 문자열을 반환합니다. 스타일을 올바르게 수정하려면 다음 두 가지 방법을 사용하는 것이 좋습니다.

방법 1 : window.getComputedStyle() 사용하여 계산 된 스타일을 얻습니다

window.getComputedStyle() 메소드는 인라인 스타일, 외부 스타일 시트 및 내부 스타일 시트의 스타일을 포함하여 최종 계산 된 요소 스타일을 얻을 수 있습니다. 요소의 top 가치를 얻은 다음 수정할 수 있습니다.

 const sidebarright = docum
const closeBtn = document.getElementById ( 'closeBtn'); // CloseBTN이 정의되어 있는지 확인하십시오 .ClosBtn.onClick = function () {
  // ... 기타 코드 ...
  const computedStyle = window.getComputedStyle (사이드 바라이트);
  topvalue = parseint (computedStyle.getPropertyValue ( 'top'), 10); // 문자열을 숫자로 변환하고 radix let newtop = topvalue -80으로 10을 지정하십시오.
  sidebarright.style.top =`$ {newtop} px`;
};

이 코드는 먼저 getComputedStyle() 사용하여 sidebarright 요소의 top 속성 값을 가져오고 숫자로 변환하고 새 top 값을 계산 한 다음 마침내 요소의 style.top 속성에 할당합니다.

방법 2 : CSS 클래스 이름을 사용하여 스타일을 제어하십시오

보다 간결하고 우아한 방법은 이동 후 상태를 대표하기 위해 .moved 와 같은 CSS 스타일 시트에서 새로운 클래스를 정의하는 것입니다.

 .Moved {
  상단 : 180px; /* 또는 기타 필요한 값*/
}

그런 다음 JavaScript 코드에서 클래스 이름을 추가하거나 제거하여 요소 스타일을 제어합니다.

 const sidebarright = docum
const closeBtn = document.getElementById ( 'closeBtn'); // CloseBTN이 정의되어 있는지 확인하십시오 .ClosBtn.onClick = function () {
  // ... 기타 코드 ...
  SideBarright.classList.Add ( 'Move');
};

이 메소드는 CSS 클래스 이름을 통해 스타일을 관리하여 유지 관리 및 확장을보다 쉽게합니다.

중요한 팁 : topAd , locationItem , myJD , closebtn , closeBtn 및 기타 변수와 같은 변수가 onclick 함수의 범위 내에서 올바르게 정의되고 초기화되어 있는지 확인하십시오. 코드의 변수 이름은 일치하지 않으며 이름 지정 사양을 통합하는 것이 좋습니다. const 사용하거나 변수를 선언 let 코드 가독성 및 유지 관리 가능성을 향상시킵니다. 템플릿 리터럴 ${} 사용하여 코드를보다 간결하게 만들기 위해 문자열을 만들어냅니다. 요소가 존재하는지 확인하는 것과 같은 오류 처리 메커니즘을 추가하십시오.

위 내용은 JS 콘솔 출력이 비어 있고 스타일 수정이 유효하지 않은 이유는 무엇입니까? 그것을 해결하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!