jquery는 입력 스타일을 추가합니다

웹 디자인에서 입력 상자는 사용자가 정보를 입력하는 주요 방법 중 하나입니다. 스타일의 아름다움은 사용자의 경험에 직접적인 영향을 미칩니다. 매우 인기 있는 JavaScript 라이브러리인 jQuery를 사용하면 입력 스타일을 쉽게 추가하고 수정할 수 있습니다. 이 기사에서는 입력 상자의 스타일을 빠르게 개선하는 데 도움이 되는 몇 가지 일반적인 jQuery 작업을 소개합니다.

1. 기본 스타일 설정

1. 배경색 수정

다음 코드를 통해 입력창의 배경색을 설정할 수 있습니다.

$('input').css('background-color', '#f6f6f6');

2. 테두리 색상 수정

마찬가지로 다음 코드도 설정할 수 있습니다. 입력 상자의 테두리 색상 :

$('input').css('border-color', '#ccc');

3. 텍스트 색상 수정

코드는 다음과 같습니다. 입력 상자에 입력된 문자의 색상을 변경할 수 있습니다.

$('input').css('color', '#666');

4. 테두리 호 설정

코드는 다음과 같습니다. 입력 상자 테두리의 원호를 늘릴 수 있습니다:

$('input').css('border-radius', '5px');

2. 고급 스타일 설정

기본 스타일 외에도 몇 가지 특별한 스타일 설정을 통해 더욱 개인화된 효과를 얻을 수도 있습니다.

1. 그림자 효과

다음 코드는 입력 상자에 그림자 효과를 추가할 수 있습니다.

$('input').css('box-shadow', '0 0 4px #999');

2. 그라디언트 채우기

코드는 다음과 같습니다. 입력 상자에 그라데이션 채우기 효과를 추가할 수 있습니다.

$('input').css('background-image', 'linear-gradient(to bottom, #fff, #f9f9f9)');

3. 너비와 높이를 설정하세요

코드는 다음과 같습니다. 입력 상자의 너비와 높이를 설정할 수 있습니다.

$('input').css('width', '200px');
$('input').css('height', '30px');

4. 플로팅 효과

코드는 다음과 같습니다. 플로팅 효과를 추가할 수 있습니다. 입력 상자:

$('input').hover(function(){
    $(this).css('border-color', '#666');
}, function(){
    $(this).css('border-color', '#ccc');
});

5. 텍스트 글꼴 및 크기 수정

코드는 다음과 같습니다. 상자에 입력된 텍스트의 입력 글꼴 유형 및 크기를 수정할 수 있습니다.

$('input').css('font-family', 'Arial');
$('input').css('font-size', '14px');

3. 동적 효과 실현 검색 상자

마지막으로 jQuery를 통해 동적 효과를 얻기 위해 검색 상자를 예로 들어보겠습니다. 검색창에 텍스트를 입력하면 배경색과 글꼴 색상이 변경됩니다.

HTML 코드:

<div class="search-box">
    <input type="text" class="search-input" placeholder="请输入搜索内容">
</div>

j쿼리 코드:

$('.search-input').on('input', function(){
    if($(this).val() != ''){
        $(this).css('background-color', '#fff');
        $(this).css('color', '#333');
    }else{
        $(this).css('background-color', '#f6f6f6');
        $(this).css('color', '#ccc');
    }
});

입력 상자의 입력 이벤트를 수신하여 입력 상자에 값이 있을 때 입력 상자의 배경색과 글꼴 색상을 변경합니다.

요약하자면, jQuery를 사용하여 입력 상자 스타일에 대한 다양한 수정을 쉽게 구현할 수 있습니다. 위의 예시와 아이디어를 익히면 스스로 더욱 개인화된 효과를 얻을 수 있고 웹 디자인의 품질을 더욱 향상시킬 수 있다고 믿습니다.

위 내용은 jquery는 입력 스타일을 추가합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!