事件监听器后的 div 大小

Question

I was working in this super simple project get really satisfied with the finish work but then CHAN, When I check the functionality of the app I noticed that the firs card, the one of the basic services get's bigger when the number change and also the third division line of the card change his size acting by himself when all the division lines are made it at once.我在这个超级简单的项目中工作，对完成的工作非常满意，然后 CHAN，当我检查应用程序的功能时，我注意到第一张卡，其中一项basic服务在数字变化时变大，第三张也是当所有的分割线一次完成时，卡的分割线会改变他自己的大小。 I was using SASS for this project but I don't think that was the problem in the compilation.我在这个项目中使用SASS ，但我认为这不是编译中的问题。

The problem is when I test the app in big screens问题是当我在大屏幕上测试应用程序时

 const switcher = document.querySelector("input"); switcher.addEventListener("click", () => { const priceBasic = document.querySelector(".priceBasic"); const pricePro = document.querySelector(".pricePro"); const priceMaster = document.querySelector(".priceMaster"); if (switcher.checked == true) { priceBasic.innerHTML = "$49.99"; pricePro.innerHTML = "$69.99"; priceMaster.innerHTML = "$89.99"; } else { priceBasic.innerHTML = "$19.99"; pricePro.innerHTML = "$24.99"; priceMaster.innerHTML = "$39.99"; } });

 body, html { height: 100%; margin: 0; } body { font-family: "Montserrat", sans-serif; background: #f7f6ff; display: grid; justify-content: center; }.container { max-width: 980px; }.switch { position: relative; display: block; width: 65px; height: 35px; }.slider { position: absolute; cursor: pointer; top: 0; right: 0; bottom: 0; left: 0; background: white; transition: 0.5s; border: 3px solid white; }.slider:before { position: absolute; content: ""; bottom: 14px; top: 3.1px; background: #eeeded; transition: 0.5s; }.switch input { display: none; } input:checked +.slider { background: #7466f5; } input:checked +.slider:before { transform: translateX(35px); }.slider.round { border-radius: 35px; }.slider.round:before { width: 35%; height: 75%; border-radius: 50px; }.header-and-switch { width: 100%; display: flex; flex-direction: column; justify-items: center; align-items: center; margin-bottom: 20%; }.header-and-switch h2 { font-size: 1.75rem; color: #524c85; } @media (min-width: 1100px) {.header-and-switch h2 { margin: 10px auto 0 auto; } } @media (min-width: 1100px) {.header-and-switch { margin-bottom: 3%; } }.switch-and-stuff { display: flex; }.switch-and-stuff h4 { margin: auto 25px; color: #b3b5c6; } @media (min-width: 1100px) {.cards-container { display: flex; flex-direction: row; justify-content: center; } }.card { background: white; display: flex; flex-direction: column; justify-items: center; align-items: center; margin-bottom: 40px; padding: 30px; border-radius: 10px; }.card h4 { color: #b3b5c6; }.card h1 { color: #170f61; font-size: 5rem; margin: 0px auto 10px auto; }.card div { width: 110%; height: 1.8px; background: #b3b5c6; } @media (min-width: 1100px) {.card { margin: auto 20px; } }.btn { -webkit-user-select: none; user-select: none; margin-top: 20px; width: 105%; height: 40px; background: linear-gradient(115deg, #a3a8f0 35%, #696fdd 100%); border: 1px solid transparent; padding: 0.375rem 0.75rem; border-radius: 5px; cursor: pointer; }.btn a { color: white; font-size: 0.9rem; font-weight: 700; letter-spacing: 1px; text-decoration: none; }.btn:focus, .btn.focus { outline: 0; }.card:hover { transition: 0.5s ease-out; transform: scale(1.1, 1.1); background: linear-gradient(115deg, #a3a8f0 35%, #696fdd 100%); }.card:hover h4, .card:hover h1 { color: white; }.card:hover.btn { background: white; }.card:hover.btn a { color: #696fdd; }.card:hover.btn:hover { text-decoration: none; background-color: #696fdd; }.card:hover.btn:hover a { color: white; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="/css/style:css"> <link href="https.//fonts.googleapis?com/css2:family=Montserrat;wght@400;600.700&display=swap" rel="stylesheet"> <title>Change the price</title> </head> <body> <div class="container"> <div class="header-and-switch"> <h2>Our Pricing</h2> <div class="switch-and-stuff"> <h4>Annually</h4> <div> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> </div> <h4>Monthly</h4> </div> </div> <div class="cards-container"> <div class="card"> <h4>Basic</h4> <h1 class="priceBasic">$19.99</h1> <div></div> <h4 class="features1">500 GB Storage</h4> <div></div> <h4 class="features">2 users Allowed</h4> <div></div> <h4 class="features">Send up to 3 GB</h4> <div></div> <button class="btn"><a href="#">LEARN MORE</a> </button> </div> <div class="card"> <h4>Professional</h4> <h1 class="pricePro">$24.99</h1> <div></div> <h4 class="features1">500 GB Storage</h4> <div></div> <h4 class="features">5 users Allowed</h4> <div></div> <h4 class="features">Send up to 10 GB</h4> <div></div> <button class="btn"><a href="#">LEARN MORE</a> </button> </div> <div class="card"> <h4>Master</h4> <h1 class="priceMaster">$39.99</h1> <div></div> <h4 class="features1">2 TB Storage</h4> <div></div> <h4 class="features">10 users Allowed</h4> <div></div> <h4 class="features">Send up to 20 GB</h4> <div></div> <button class="btn"><a href="#">LEARN MORE</a> </button> </div> </div> </div> <script src="index.js"></script> </body> </html>

Answer 1

what I would do: the 2 prices are present on the interface but always with one or the other hidden.我会做什么：2 个价格出现在界面上，但总是隐藏一个或另一个。

example code of this system:本系统示例代码：

 const AllPrices = document.querySelectorAll('h1.price') priceToggle.onclick=_=> { AllPrices.forEach(p=>p.classList.toggle('annual')) }

 button { display:block; margin:2em }.priceBlock { display: inline-block; margin: .5em; padding: .7em; font-size: 1.2em; background-color: #85d5d8; color: navy; } h1.price span { display: block; width: 100%; float: left; clear: both; text-align: center; overflow: hidden; } h1.price span:nth-of-type(2) { height:0; } h1.price.annual span:nth-of-type(1) { height:0; } h1.price.annual span:nth-of-type(2) { height:auto; }

 <button id="priceToggle"> price toggle </button> <div class="priceBlock"> <h1 class="price"> <span>$19.99</span> <span>$500.99</span> </h1> </div> <div class="priceBlock"> <h1 class="price"> <span>$23.99</span> <span>$250.99</span> </h1> </div>

事件监听器后的 div 大小

问题描述

1 个解决方案

解决方案1
1 2020-10-07 03:34:18

事件监听器后的 div 大小

问题描述

1 个解决方案

解决方案1 1 2020-10-07 03:34:18

解决方案1
1 2020-10-07 03:34:18