JavaScript는 버튼을 클릭한 후 배경색 변경을 구현합니다(두 가지 방법)-JS 튜토리얼-php.cn

JavaScript는 버튼을 클릭한 후 배경색 변경을 구현합니다(두 가지 방법)

藏色散人

풀어 주다： 2021-08-31 10:43:14

원래의

16833명이 탐색했습니다.

이전 글 "자바스크립트를 통해 버튼 클릭 후 라벨의 href 값 변경"에서 자바스크립트를 통해 버튼 클릭 후 라벨의 href 값을 변경하는 방법을 소개해드렸는데요, 관심 있는 친구들은 배워보실 수 있습니다. ~

이번 글에서는 버튼을 클릭한 후 JavaScript를 사용하여 배경색을 변경하는 방법을 계속 소개하겠습니다.

아래 두 가지 방법을 소개하겠습니다.

첫 번째 방법

참고: 이 방법은 버튼을 클릭한 후 JavaScript를 사용하여 배경색을 변경합니다. 버튼을 클릭한 후 HTML DOM 스타일의 backgroundColor 속성을 사용하여 배경색을 변경합니다. 이 속성은 요소의 배경색을 설정하는 데 사용됩니다.

코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body style = "text-align:center;">

<h1 style = "color:#ff311f;" >
    PHP中文网
</h1>

<p id = "GFG_UP" style =
        "font-size: 16px; font-weight: bold;">
</p>

<button onclick = "gfg_Run()">
    点击
</button>

<p id = "GFG_DOWN" style =
        "color:green; font-size: 20px; font-weight: bold;">
</p>

<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    var str = "单击按钮更改背景颜色";

    el_up.innerHTML = str;

    function changeColor(color) {
        document.body.style.background = color;
    }

    function gfg_Run() {
        changeColor(&#39;yellow&#39;);
        el_down.innerHTML = "背景颜色已改变";
    }
</script>
</body>

</html>

로그인 후 복사

효과는 다음과 같습니다.

GIF 2021-8-31 星期二上午 10-35-16.gif

두 번째 방법

이 방법은 버튼을 클릭한 후 jQuery를 사용하여 배경색을 변경합니다. text() 메서드는 텍스트 내용을 선택한 요소로 설정하는 데 사용되며 on() 메서드는 선택한 요소에 대한 이벤트 핸들러로 사용되며 css() 메서드는 배경색을 변경/설정하는 데 사용됩니다. 요소의.

코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src ="jquery.min.js"></script>
</head>

<body style = "text-align:center;">

<h1 style = "color:#ff7a03;" >
    PHP中文网
</h1>

<p id = "GFG_UP" style =
        "font-size: 16px; font-weight: bold;">
</p>

<button>
    点击
</button>

<p id = "GFG_DOWN" style =
        "color:#ff311f; font-size: 20px; font-weight: bold;">
</p>

<script>
    $(&#39;#GFG_UP&#39;).text("单击按钮更改背景颜色");
    $(&#39;button&#39;).on(&#39;click&#39;, function() {
        $(&#39;body&#39;).css(&#39;background&#39;, &#39;#45b1ff&#39;);
        $(&#39;#GFG_DOWN&#39;).text("背景颜色已改变");
    });
</script>
</body>

</html>

로그인 후 복사

효과는 다음과 같습니다.

GIF 2021-8-31 星期二上午 10-38-57.gif