如何減小按鈕的大小

Question

我有一些 JavaScript 使我的整個頁面都可以通過我認為是容器元素的內容進行點擊。 但是，當我嘗試減小它的大小，並減小相關小部件的大小時，甚至頁腳也是可點擊的。 盡管頁腳不會根據 JavaScript 代碼切換，但它確實會切換到它對a href "#"做出反應並在用戶嘗試 select 中的元素/鏈接時將其帶到頁面頂部頁腳。

那么我怎樣才能讓頁腳停止可點擊呢？ 頁面本身似乎僅在單擊其上的元素時才會做出反應，但幾乎整個頁腳區域都在對href#

<a id="mni" href="#">
<div class="container4" onclick="myFunction(this)">
     <div class="nimageone">
          <img  src="http://4309.co.uk/wp-content/uploads/2020/05/IMG_20200509_165113-1-219x300.jpg" alt="" width="350" height="300" c.class="size-medium wp-image-14178" /></div>
     </div>
     <script>
         function myFunction(x){
              x.classList.toggle('change');
         }
     </script>
</div>

Css

.change 
.nimageone img {display:none}

桌面在這里

Answer 1

您沒有全面包含 HTML 元素的樹結構。

您可以通過以下方式實現您想要做的事情。

    <div>
   <a id="mni" href="#">
   <div class="container4" 
     onclick="myFunction(this)">
    <div class="nimageone"><img 
    src="http://4309.co.uk/wp-  
   content/uploads/2020/05/IMG_20200509_165113-1- 
  219x300.jpg" alt="" width="350" height="300" class=" 
   size-medium wp-image-14178" /></div>
  </div>


 </a> //remember to close the <a> tag here before the 
footer item

 /////Your footer item can come below here 
<footer>
</footer>
</div>

Answer 2

如果您想調整 HTML 中按鈕的大小，您可以像在“img”標簽中設置寬度和高度屬性一樣設置它。