>웹 프론트엔드 >CSS 튜토리얼 >CSS 및 JavaScript를 사용하여 텍스트를 소문자로 만든 다음 대문자로 표시하려면 어떻게 해야 합니까?

CSS 및 JavaScript를 사용하여 텍스트를 소문자로 만든 다음 대문자로 표시하려면 어떻게 해야 합니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-01 12:09:02529검색

How can I lowercase and then capitalize text using CSS and JavaScript?

CSS 및 JavaScript를 사용하여 소문자로 바꾼 후 텍스트 대문자화

CSS 또는 JavaScript를 사용하여 먼저 소문자로 만든 다음 텍스트를 대문자로 바꾸는 것이 가능합니다.

CSS 방법

CSS는 text-transform 속성을 사용하여 각 단어의 첫 글자를 대문자로 바꿀 수 있습니다. text-transform:capitalize;를 설정하면 텍스트가 먼저 자동으로 소문자로 변환된 다음 각 단어의 첫 글자가 대문자로 표시됩니다.

예:

<code class="css">.className {
    text-transform: capitalize;
}</code>

이 CSS는 className 클래스가 있는 요소 내의 모든 텍스트가 먼저 소문자로 된 다음

JavaScript 방법

JavaScript는 소문자 이후 텍스트를 대문자로 표시하는 보다 유연한 접근 방식을 제공합니다. toLowerCase() 메서드를 사용하면 모든 텍스트를 소문자로 변환할 수 있으며, 이어서 replacement() 메서드를 사용하여 각 단어의 첫 글자를 대문자로 바꿀 수 있습니다.

예:

<code class="js">function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');</code>

이 예에서 capitalize() 함수는 먼저 toLowerCase()를 사용하여 입력 문자열 s를 소문자로 변환합니다. 그런 다음 정규식 패턴(/b./g)과 함께 replacement() 메서드를 사용하여 각 단어의 첫 번째 문자(단어 경계 b로 표시됨)를 찾고 익명 콜백 함수 function(a){ return a. toUpperCase(); }, 일치하는 문자를 대문자로 표시합니다.

위 내용은 CSS 및 JavaScript를 사용하여 텍스트를 소문자로 만든 다음 대문자로 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.