为什么我不能显示一个div？
[英]Why I can't show a div?
问题描述
I am trying to show a heart of id heart when the button of id botao2 is clicked, but when I try to set display = "visible" the value of it didn´t change.
当单击 id botao2 的按钮时，我试图显示一颗 id heart 的心，但是当我尝试设置display = "visible"时，它的值没有改变。
I also don't know why, but when I try to get the height, width or set the value of x and y of any button I can't, the return is just none.我也不知道为什么，但是当我尝试获取任何我不能的按钮的高度、宽度或设置 x 和 y 的值时，返回只是无。
function move(el){ let div = document.getElementsByClassName("container-button"); let width = Math.ceil(el.clientWidth); let height = Math.ceil(el.clientHeight); let wdh = Math.floor(div[0].clientHeight); let wdw = Math.floor(div[0].clientWidth); var changeTop = Math.floor((Math.random() * (wdh - height + 1))); var changeLeft = Math.floor((Math.random() * (wdw - width + 1))); console.log("Height: " + changeTop + " Width: " + changeLeft); el.style.marginTop = changeTop + "px"; el.style.marginLeft = changeLeft + "px"; } function setHeart(element){ document.getElementById("botao").style.display = "none"; document.getElementById("botao2").style.display = "none"; document.getElementById("heart").style.display = "visible"; }
body{ align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background-image: linear-gradient(to top left, rgba(255,0,0,0), rgba(255,0,0,1)); }.container { flex-direction: row; justify-content: center; align-items: center; width: 700px; margin: 0 auto; display: flex; }.wrap { /* Quebra a linha assim que um dos flex itens não puder mais ser compactado. */ flex-wrap: wrap; }.item { /* O flex: 1; é necessário para que cada item se expanda ocupando o tamanho máximo do container. */ flex: 1; background: white; font-size: 1.5em; border-radius: 10px; width: 80px; height: 40px; border: none; color: red; -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; }.container-button { align-content: center; width: 500px; height: 500px; display: flex; margin-top: 25%; margin-left: 35%; } h1 { text-align: center; color: white; }.heart { background: red; position: relative; height: 100px; width:100px; /* Animation */ transform: rotate(-45deg) scale(1); animation: pulse 2s linear infinite; } #heart { display: none; }.heart::after { /* background:blue; */ background:inherit; border-radius: 50%; /* To make circle */ content:''; position:absolute; /* top: -100px;*/ top: -50%; /* Inherit properties of parent */ /* left: -100px; */ left:0; height: 100px; width:100px; }.heart::before { /* background:green; */ background:inherit; border-radius: 50%; /* To make circle */ content:''; position:absolute; top:0; right:-50%; /* Inherit properties of parent */ height: 100px; width:100px; } @keyframes pulse{ 0% { transform: rotate(-45deg) scale(1); opacity: 0; }/* 10% { transform: rotate(-45deg) scale(1.3); } 20% { transform: rotate(-45deg) scale(0.9); } 30% { transform: rotate(-45deg) scale(1.2); } 40% { transform: rotate(-45deg) scale(0.9); }*/ 50% { transform: rotate(-45deg) scale(1.3); opacity: 1; }/* 60% { transform: rotate(-45deg) scale(0.95); } 70% { transform: rotate(-45deg) scale(1); } */ 100% { transform: rotate(-45deg) scale(1); opacity: 1; } }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <script src="script?js"></script> </head> <body> <div class="container wrap"> <div class="container-title"> <h1>Quer sair comigo.</h1> </div> <div class="container-button"> <div class = "heart" id="heart"></div> <script type="text/javascript"> document.getElementById("heart").style;display = "none"; </script> <div class="botao"> <button class="item" type="button" id="botao2" onclick="setHeart(this)">SIM</button> </div> <div class="botao"> <button type="button" class="item" id="botao" onmouseover="move(this)">NÃO</button> </div> </div> </div> </body> </html>
3 个解决方案
解决方案1
0 2022-08-13 02:50:07
Try to set dispay to block , maybe you can create a jsfiddle so it's easier to debug the second part of your question尝试将dispay设置为block ，也许您可以创建一个 jsfiddle 以便更容易调试问题的第二部分
解决方案2
0 2022-08-13 02:50:42
You need to set display : block instead of visible:您需要设置display : block而不是可见：
document.getElementById("heart").style.display = "block";
Because they're not the same:因为它们不一样：
visibility:hidden has visibility:visible and it will keep the element on the page and occupies that space but does not show it to the user. visibility:hidden具有visibility:visible ，它将保留页面上的元素并占据该空间，但不会向用户显示。
display:none has display:block and it will not be available on the page and does not occupy any space. display:none有display:block并且它不会在页面上可用并且不占用任何空间。
解决方案3
0 2022-08-13 03:05:10
Couple things:几件事：
Visible is not a valid display value ( see options here ), I have set block instead in your setHeat function: Visible 不是有效的display值（请参阅此处的选项），我在您的setHeat function 中设置了block ：
document.getElementById("heart").style.display = "block";
Also edited your console.log inside of move() to include both width & height values, while X & Y coordinates are already shown with your changeTop & changeLeft (you can see these in the fiddle's console at the bottom when you hover over NÃO button triggering move() )还在move()中编辑了您的console.log以包含width和height值，而 X 和 Y 坐标已经与您的changeTop和changeLeft （当您在 NÃO 按钮上 hover 时，您可以在底部的小提琴控制台中看到这些触发move() )
console.log("botao width: " + width + " botao height: " + height + " Height: " + changeTop + " Width: " + changeLeft);
See working snippet below:请参阅下面的工作片段：
function move(el) { let div = document.getElementsByClassName("container-button"); let width = Math.ceil(el.clientWidth); let height = Math.ceil(el.clientHeight); let wdh = Math.floor(div[0].clientHeight); let wdw = Math.floor(div[0].clientWidth); var changeTop = Math.floor((Math.random() * (wdh - height + 1))); var changeLeft = Math.floor((Math.random() * (wdw - width + 1))); console.log("botao width: " + width + " botao height: " + height + " Height: " + changeTop + " Width: " + changeLeft); el.style.marginTop = changeTop + "px"; el.style.marginLeft = changeLeft + "px"; } function setHeart(element) { document.getElementById("botao").style.display = "none"; document.getElementById("botao2").style.display = "none"; document.getElementById("heart").style.display = "block"; }
body { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background-image: linear-gradient(to top left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); }.container { flex-direction: row; justify-content: center; align-items: center; width: 700px; margin: 0 auto; display: flex; }.wrap { /* Quebra a linha assim que um dos flex itens não puder mais ser compactado. */ flex-wrap: wrap; }.item { /* O flex: 1; é necessário para que cada item se expanda ocupando o tamanho máximo do container. */ flex: 1; background: white; font-size: 1.5em; border-radius: 10px; width: 80px; height: 40px; border: none; color: red; -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; }.container-button { align-content: center; width: 500px; height: 500px; display: flex; margin-top: 25%; margin-left: 35%; } h1 { text-align: center; color: white; }.heart { background: yellow; position: relative; height: 100px; width: 100px; /* Animation */ transform: rotate(-45deg) scale(1); animation: pulse 2s linear infinite; } #heart { display: none; }.heart::after { /* background:blue; */ background: inherit; border-radius: 50%; /* To make circle */ content: ''; position: absolute; /* top: -100px;*/ top: -50%; /* Inherit properties of parent */ /* left: -100px; */ left: 0; height: 100px; width: 100px; }.heart::before { /* background:green; */ background: inherit; border-radius: 50%; /* To make circle */ content: ''; position: absolute; top: 0; right: -50%; /* Inherit properties of parent */ height: 100px; width: 100px; } @keyframes pulse { 0% { transform: rotate(-45deg) scale(1); opacity: 0; } 50% { transform: rotate(-45deg) scale(1.3); opacity: 1; } 100% { transform: rotate(-45deg) scale(1); opacity: 1; } }
<div class="container wrap"> <div class="container-title"> <h1>Quer sair comigo?</h1> </div> <div class="container-button"> <div class="heart" id="heart"></div> <script type="text/javascript"> document.getElementById("heart").style.display = "none"; </script> <div class="botao"> <button class="item" type="button" id="botao2" onclick="setHeart(this)">SIM</button> </div> <div class="botao"> <button type="button" class="item" id="botao" onmouseover="move(this)">NÃO</button> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么不能将Child追加到指定的DIV？ - Why can't I appendChild to the specified DIV?
为什么我不能让警报显示？ - Why can't I get the alert to show?
我无法在我的 div 上显示项目列表的内容 - I can't show content of a list of items on my div
为什么找不到用jQuery附加到正文的DIV - Why can't I find this DIV that I appended to the body with jQuery
为什么我不能设置要在div中显示的值？ - Why can't I set value to display in a div?
为什么我不能访问HTML div / jQuery对象的属性？ - Why can't I access the properties of a HTML div/jQuery object?
为什么我不能通过点击DIV来加粗文字？ - Why can't I bold text by clicking a DIV?
为什么我不能通过 Javascript 在嵌套的 div 中插入 html？ - Why can´t I insert html in a nested div via Javascript?
为什么我不能使用JavaScript隐藏该div？ - Why I can't hide this div using JavaScript?
为什么我不能使用JavaScript和 <div> ？ - Why can't I make a Table row using JavaScript and a <div>?
相关标签