html, js 및 css로 객체 불투명도를 변경하는 버튼을 어떻게 얻습니까?

x 옐로우 레인저 KPx

내 웹 사이트 랜딩 페이지의 날씨 섹션을 숨기는 버튼을 만들고 싶었지만 만드는 방법을 모르겠습니다! 영상

저는 현재 "선택기"를 사용하므로 오른쪽 하단에서 볼 수있는 0또는 1오른쪽 하단에서 볼 수있는 것을 선택할 수 있습니다. 잘 작동하지만 버튼을 권장합니다. 내가 사용하는 현재 코드는 다음과 같습니다.

</div>
  <div class="wopacity">
   <select onchange="myFunction(this);" size="2">
   <option>0
   <option selected="selected">1
   </select>

   <script>
    function myFunction(x) {
     // Return the text of the selected option
     var opacity = x.options[x.selectedIndex].text;
     var el = document.getElementById("p1");
     if (el.style.opacity !== undefined) {
       el.style.opacity = opacity;
     } else {
       alert("Your browser doesn't support this example!");
     }
    }
   </script>
  </div>
테리 직물

버튼을 사용하려면 버튼에 data- * 속성추가 할 수 있습니다 . 다음과 같이 보일 것입니다.

<html>
<head>
<script>
    function myFunction(button) {
       // get data-opacity
       let opacity = button.dataset.opacity;
       const el = document.getElementById("p1");
       el.style.opacity = opacity;

       /* shorthand for
            if (opacity === "1") {
              button.dataset.opacity === "0";
            else {
              button.dataset.opacity === "1";
            }
       */
       button.dataset.opacity = opacity === "1" ? "0" : "1";
     }
</script>
</head>
<body>
<div id="p1">Opacity test</div>
<button data-opacity="0" onclick="myFunction(this)">Change opacity</button>
</body>
</html>

이것이 실제로 당신이 원하는 것입니까, 아니면 제가 잘못된 질문을 받았습니까?

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

내 사진 (HTML 및 JS)의 파일 경로를 어떻게 얻을 수 있습니까?

분류에서Dev

HTML 및 CSS로 큐브 효과를 어떻게 얻을 수 있습니까?

분류에서Dev

캔버스에 렌더링 된 개별 개체의 불투명도를 어떻게 변경합니까?

분류에서Dev

CSS를 사용하여 바운스 및 불투명도 변경을 애니메이션하는 방법

분류에서Dev

CSS 및 JS로 시차 이동 배경을 어떻게 얻을 수 있습니까?

분류에서Dev

버튼을 사용하여 html로 js 객체를 표시하는 방법

분류에서Dev

HTML 및 CSS로 테두리 중간에 제목을 어떻게 얻습니까?

분류에서Dev

HTML 코드를 JSON 객체로 어떻게 변환 할 수 있습니까?

분류에서Dev

CSS를 사용하여 HTML 버튼을 어떻게 강조합니까?

분류에서Dev

jQuery 객체를 JS 배열로 어떻게 변환 할 수 있습니까?

분류에서Dev

Java에서 URL 객체 내부 경로의 부모를 어떻게 얻을 수 있습니까?

분류에서Dev

SwiftUI : 경고 버튼 및 NavigationLink 뒤로 버튼의 색상을 어떻게 변경할 수 있습니까?

분류에서Dev

버튼 onClick에서 개체 이동 및 불투명도 변경

분류에서Dev

변수에 저장된 경로를 사용하여 PHP에서 객체 속성의 값을 어떻게 얻을 수 있습니까?

분류에서Dev

HTML, CSS 및 Javascript를 EXE로 어떻게 변환 할 수 있습니까?

분류에서Dev

기존 html val을 나중에 html 및 / 또는 css를 사용하여 계산 된 값으로 대체하려면 어떻게해야합니까?

분류에서Dev

HTML, CSS 및 JS에서 여러 이미지를 오버레이하려면 어떻게합니까?

분류에서Dev

객체는 HashMap에서 키를 어떻게 얻을 수 있습니까?

분류에서Dev

ramda를 사용하여 객체의 모든 값을 어떻게 얻습니까?

분류에서Dev

배경 및 불투명도를 버튼으로 설정하지만 콘텐츠에 영향을주지 않음

분류에서Dev

부모 요소가 다른 불투명도를 갖는 동안 어떻게 자식 요소의 불투명도를 100 %로 만들 수 있습니까?

분류에서Dev

jQuery를 사용하여 HTML5 캔버스 ctx 객체를 어떻게 페이드 인 및 아웃 할 수 있습니까?

분류에서Dev

신속하게 동일한 프로토콜을 구현 한 새 객체에 대한 객체 참조를 어떻게 변경할 수 있습니까?

분류에서Dev

dir의 인수로 전체 경로를 어떻게 얻을 수 있습니까?

분류에서Dev

어떻게 불투명도 = 1 느린 CSS 전환 및 불투명도 = 0 빠르고 / 즉시 전환을 할까?

분류에서Dev

버튼 하단 html css를 어떻게 정렬 할 수 있습니까?

분류에서Dev

CSS 불투명도를 어떻게 레이어합니까?

분류에서Dev

복사 및 붙여 넣기는 Inkscape에서 개체의 불투명도를 원하지 않게 변경합니다.

분류에서Dev

복사 및 붙여 넣기는 Inkscape에서 개체의 불투명도를 원하지 않게 변경합니다.

Related 관련 기사

  1. 1

    내 사진 (HTML 및 JS)의 파일 경로를 어떻게 얻을 수 있습니까?

  2. 2

    HTML 및 CSS로 큐브 효과를 어떻게 얻을 수 있습니까?

  3. 3

    캔버스에 렌더링 된 개별 개체의 불투명도를 어떻게 변경합니까?

  4. 4

    CSS를 사용하여 바운스 및 불투명도 변경을 애니메이션하는 방법

  5. 5

    CSS 및 JS로 시차 이동 배경을 어떻게 얻을 수 있습니까?

  6. 6

    버튼을 사용하여 html로 js 객체를 표시하는 방법

  7. 7

    HTML 및 CSS로 테두리 중간에 제목을 어떻게 얻습니까?

  8. 8

    HTML 코드를 JSON 객체로 어떻게 변환 할 수 있습니까?

  9. 9

    CSS를 사용하여 HTML 버튼을 어떻게 강조합니까?

  10. 10

    jQuery 객체를 JS 배열로 어떻게 변환 할 수 있습니까?

  11. 11

    Java에서 URL 객체 내부 경로의 부모를 어떻게 얻을 수 있습니까?

  12. 12

    SwiftUI : 경고 버튼 및 NavigationLink 뒤로 버튼의 색상을 어떻게 변경할 수 있습니까?

  13. 13

    버튼 onClick에서 개체 이동 및 불투명도 변경

  14. 14

    변수에 저장된 경로를 사용하여 PHP에서 객체 속성의 값을 어떻게 얻을 수 있습니까?

  15. 15

    HTML, CSS 및 Javascript를 EXE로 어떻게 변환 할 수 있습니까?

  16. 16

    기존 html val을 나중에 html 및 / 또는 css를 사용하여 계산 된 값으로 대체하려면 어떻게해야합니까?

  17. 17

    HTML, CSS 및 JS에서 여러 이미지를 오버레이하려면 어떻게합니까?

  18. 18

    객체는 HashMap에서 키를 어떻게 얻을 수 있습니까?

  19. 19

    ramda를 사용하여 객체의 모든 값을 어떻게 얻습니까?

  20. 20

    배경 및 불투명도를 버튼으로 설정하지만 콘텐츠에 영향을주지 않음

  21. 21

    부모 요소가 다른 불투명도를 갖는 동안 어떻게 자식 요소의 불투명도를 100 %로 만들 수 있습니까?

  22. 22

    jQuery를 사용하여 HTML5 캔버스 ctx 객체를 어떻게 페이드 인 및 아웃 할 수 있습니까?

  23. 23

    신속하게 동일한 프로토콜을 구현 한 새 객체에 대한 객체 참조를 어떻게 변경할 수 있습니까?

  24. 24

    dir의 인수로 전체 경로를 어떻게 얻을 수 있습니까?

  25. 25

    어떻게 불투명도 = 1 느린 CSS 전환 및 불투명도 = 0 빠르고 / 즉시 전환을 할까?

  26. 26

    버튼 하단 html css를 어떻게 정렬 할 수 있습니까?

  27. 27

    CSS 불투명도를 어떻게 레이어합니까?

  28. 28

    복사 및 붙여 넣기는 Inkscape에서 개체의 불투명도를 원하지 않게 변경합니다.

  29. 29

    복사 및 붙여 넣기는 Inkscape에서 개체의 불투명도를 원하지 않게 변경합니다.

뜨겁다태그

보관