읽기 전용, 비활성화, 표시 및 표시 간의 차이점에 대한 자세한 설명

이 글에서는 주로 읽기 전용, 비활성화, 표시, 표시의 차이점에 대한 자세한 설명을 소개합니다. CSS 스타일 설정에는 기능은 동일하지만 표현 형태가 조금씩 다른 속성이 여러 개 있습니다. 오늘 js를 통해 객체의 스타일 속성을 변경해 보니 표시와 표시가 동일한 것처럼 보이지만 실제로는 그런데 여기에는 읽기 전용과 비활성화의 차이점도 나와 있습니다.

표시와 표시의 차이점:

(1) 우선, display:none과 visible:hidden은 모두 웹 페이지에서 요소를 숨길 수 있습니다.

(2) 스타일 파일 또는 페이지 파일 코드에서 요소를 숨기기 위해 직접 display:none을 사용하는 경우, 페이지를 로드한 후 요소를 표시하기 위해 js를 통해 스타일을 설정하지 않고 js 코드를 올바르게 가져오지 못합니다. offSetTop, offSetLeft 등과 같은 이 요소의 일부 속성은 0 값을 반환합니다. 이러한 값은 요소를 표시하기 위해 js에서 style.display를 설정한 후에만 올바르게 얻을 수 있습니다.

(3) display:none을 사용하여 숨겨진 요소는 Baidu와 같은 검색 사이트에서 검색되지 않으며, 이는 웹 사이트의 SEO에 영향을 미칠 수 있습니다. 경우에 따라 left:-100000px를 사용하여 동일한 효과를 얻을 수 있습니다.

(4) 요소의 display:none 스타일이 스타일 파일이나 을 통해 설정된 경우, js로 style.display=""를 설정하면 요소가 표시되지 않습니다. 대신 블록 또는 인라인에 해당하는 값을 사용하세요. style="display:none"을 통해 요소에 직접 설정하면 이 문제가 발생하지 않습니다.

(5) 요소를 표시:없음으로 설정하면 숨겨진 개체를 위한 물리적 공간이 예약되지 않습니다. 즉, 일반인의 관점에서 개체는 페이지에서 완전히 사라지게 됩니다. 요소를 visible:hidden으로 설정하면 웹 페이지에서 개체가 보이지 않게 되지만 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다.

읽기 전용과 비활성화의 차이점:

(1) 읽기 전용과 비활성화는 모두 사용자가 양식 필드의 내용을 변경하는 것을 방지합니다.

(2) 비활성화 및 읽기 전용 속성이 모두 true로 설정된 경우 양식 속성을 편집할 수 없습니다.

(3) 입력 항목 비활성화를 true로 설정하면 양식 입력 항목이 포커스를 얻을 수 없으며 입력 항목에 대한 모든 사용자 작업(마우스 클릭, 키보드 입력 등)이 무효화됩니다. 읽기 전용은 텍스트를 입력할 수 있는 텍스트 입력 상자와 같은 입력 항목에만 해당됩니다. true로 설정하면 사용자는 해당 텍스트를 편집할 수는 없지만 계속 집중할 수 있습니다.

(4) 읽기 전용은 입력(텍스트/비밀번호) 및 텍스트 영역에만 유효하고 비활성화는 html의 모든 양식 요소에 유효하지만 양식 요소가 비활성화된 후 양식 POST 또는 GET 메서드를 사용할 때 제출 후, 이 요소의 값은 제출되지 않지만 읽기 전용으로 설정된 양식 요소의 값은 계속 제출됩니다. 더 일반적으로 사용되는 상황은 다음과 같습니다.

(1) 고유 식별 코드는 사용자를 위한 양식에 미리 채워져 있으며 사용자는 이를 변경할 수 없지만 제출 시 값을 전달해야 하며 해당 속성은 지금은 읽기 전용으로 설정해야 합니다.

(2) 사용자가 양식을 정식으로 제출하면 관리자의 정보 확인을 기다려야 하는 경우가 종종 있습니다. 이로 인해 사용자는 양식의 데이터를 변경할 수 없으며 보기만 가능합니다. .disable은 요소의 범위가 넓으므로 이때는 비활성화를 사용해야 하지만 동시에 사용자가 이 버튼을 누르는 한 해당 버튼을 비활성화하는 데 주의해야 합니다. 데이터베이스 작업 페이지에서 무결성 검사를 수행하지 않으면 데이터베이스의 값이 지워집니다. 이 경우 비활성화되지 않고 읽기 전용을 사용하는 경우 양식에 입력(텍스트/비밀번호) 및 텍스트 영역 요소만 있으면 여전히 가능합니다. 선택과 같은 다른 요소가 있는 경우 사용자는 값을 다시 쓰고 키를 누를 수 있습니다. 제출하려면 Enter 키를 누르십시오(Enter는 기본 제출 트리거 키입니다).

(3) 사용자가 제출 버튼을 누른 후 제출 버튼을 비활성화하기 위해 JavaScript를 사용하는 경우가 많습니다. 이를 통해 사용자가 네트워크 상태가 좋지 않은 환경에서 제출 버튼을 반복적으로 클릭하여 데이터가 데이터베이스에 중복 저장되는 것을 방지할 수 있습니다. .

위 내용은 읽기 전용, 비활성화, 표시, 표시의 차이점에 대한 자세한 설명입니다. 모든 분들께 도움이 되길 바랍니다.

관련 권장 사항:

읽기 전용과 비활성화의 미묘한 차이에 대한 자세한 설명

HTML의 읽기 전용 속성과 입력 비활성화의 차이점에 대한 간략한 설명

Div 디스플레이와 비활성화의 차이점에 대한 설명 가시성 속성 차이점에 대한 자세한 설명

위 내용은 읽기 전용, 비활성화, 표시 및 표시 간의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!