Javascript를 사용하여 배경색에 따라 텍스트 색상 변경

3949 단어 cssphpjavascripthtml
이 튜토리얼에서는 자바 스크립트를 사용하여 배경색을 기반으로 텍스트 색상이 변경되는 것을 볼 수 있습니다. 때때로 우리는 배경색에 따라 텍스트 또는 글꼴 색상을 변경해야 하는 요구 사항이 있으며 그 때 텍스트 색상을 수동으로 변경하는 경우 이 게시물이 확실히 도움이 될 것입니다.

이번 글에서는 jquery를 이용하여 배경색에 따라 텍스트 색상을 변경하는 방법에 대해 알아보겠습니다.

그럼 배경색 자바스크립트를 기반으로 텍스트 색상을 동적으로 변경하는 방법에 대해 알아보겠습니다.

Create File And Add Below Code



HTML 파일을 만들고 파일에 아래 코드를 만듭니다.

<html>
<head>
    <title>Change Text Color Based On Background Color Using Javascript
    </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
    </script>     
</head> 

<body id="body" align="center"> 
    <h1 style="margin-top:20px;margin-bottom:20px;font-size:18px;">   
            <b>Change Text Color Based On Background Color Using Javascript - Techsolutionstuff</b>
        </h1> 
    <p id="col_UP" style="font-size: 15px; font-weight: bold;"> </p> 
    <button onclick="col_Fun()" style="padding:10px;">
        click here 
    </button> 
    <br> 
    <br> 
    <div id="backG">Welcome to Techsolutionstuff</div> 

</body> 
</html>



Read Also : How To Create List And Grid View Using JavaScript


Add CSS



이제 파일 헤드에 CSS를 추가하십시오.

#backG { 
    width: 200px; 
    color: white; 
    background: #000; 
    margin: 0 auto;
    padding:10px;
    border-radius:5px;
}


Add Javascript Code



이 단계에서는 파일 바닥글에 jquery 코드를 추가합니다.

         var el_up = document.getElementById('col_UP'); 
        var rgbValue = [255, 0, 0]; 


        function setColor() { 
            rgbValue[0] = Math.round(Math.random() * 255); 
            rgbValue[1] = Math.round(Math.random() * 255); 
            rgbValue[2] = Math.round(Math.random() * 255); 
            var color = Math.round(((parseInt(rgbValue[0]) * 299) + 
                (parseInt(rgbValue[1]) * 587) + 
                (parseInt(rgbValue[2]) * 114)) / 1000); 
            var textColor = (color > 125) ? 'black' : 'white'; 
            var backColor =  
                'rgb(' + rgbValue[0] + ', ' + rgbValue[1] + ', ' 
             + rgbValue[2] + ')'; 

            $('#backG').css('color', textColor); 
            $('#backG').css('background-color', backColor); 
        } 

        function col_Fun() { 
            setColor(); 
        }



Read Also : Carbon Add Years To Date In Laravel


출력 :




다음을 좋아할 수도 있습니다.
  • Read Also : Laravel 8 CRUD Operation Example
  • Read Also : Autotab To Next Input Field JQuery Example
  • Read Also : Drag and Drop File Upload Using Dropzone JS in Laravel 8
    • ROS를 사용하여 RealSense를 여러 대 연결하는 방법
    #FOSS In Python: OpenBB 터미널을 사용하여 금융 프로세스 및 연구 작업 자동화

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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