我的css类info做了以下事情.在下面的地方加上价格.为文本

我有以下信息，但没有显示我想显示的内容

在容器上，它将以显示…

它开始显示…

不知道为什么它不工作，我知道我的javascript正在工作，即使它是在容器后面。

如何解决这个问题?

代码html,css和javascript

let ws_binance_shib = new WebSocket('wss://stream.binance.com:9443/ws');
let html_element_binance_shib = document.getElementById('show_price_binance_shib');
let last_price_binance_shib = null;
ws_binance_shib.onopen = function () {
ws_binance_shib.send(JSON.stringify ({
'method': 'SUBSCRIBE',
'params': ['shibusdt@trade'],
'id': 1
}))
};
ws_binance_shib.onmessage = function (event) {
let current_price_binance_shib = JSON.parse(event.data);
let price_binance_shib = parseFloat(current_price_binance_shib.p).toFixed(8);
html_element_binance_shib.innerText = price_binance_shib;
if ((price_binance_shib < last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
html_element_binance_shib.innerText = '↓' + price_binance_shib;
html_element_binance_shib.style.color = 'Bright Red';
} else if ((price_binance_shib > last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
html_element_binance_shib.innerText = '↑' + price_binance_shib;
html_element_binance_shib.style.color = 'lime';
} else if ((price_binance_shib == last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
html_element_binance_shib.innerText = price_binance_shib;
html_element_binance_shib.style.color = 'Purple';
}
last_price_binance_shib = price_binance_shib;
};

*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
background: #29303f;
display: grid;
justify-content: center;
align-content: center;
}
/* containera */
.containera{
width: 350px;
border-radius: 20px;
height: 400px;
background: #1e1e1e;    
display: grid;
justify-content: center;
align-content: center;
position: relative;
overflow: hidden;
}
.containera span{
color: #fff;
font-size: 30px;
font-weight: bold;
font-family: arial;
font-family: Consolas, monaco, monospace;
z-index: 1;
}
.containera::before{
content: '';
position: absolute;
width: 150px;
height: 600px;
left: 75px;
top: -100px;
background: linear-gradient(#00e5ff, #b400fb);
animation: animate 10s linear infinite;
}
@keyframes animate{
0%{
transform: rotate(0deg);
}100%{
transform: rotate(360deg);
}   
}
.containera::after{
content: '';
position: absolute;
inset: 5px;
background: #29303f;
border-radius: 18px;
}
.row {
width: 100%;
}
.row span {
font-size: 0.8vw;
font-weight: 700;
}
.col-2 {
font-size: 1.8vw;
font-weight: 700;
border-radius: 2vw;
box-shadow: 10px 10px 25px #e0e0e0;
}
.pair {
font-size: 0.8vw;
font-weight: 500;
}
.price {
font-family: Consolas, monaco, monospace;
}

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Lewendige prys</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
<link rel='stylesheet' type='text/css' href='live.css'>
</head>
<body>
<div >
<div>
<div class='d-flex align-items-center justify-content-center'>

<div class='col-2 p-5 me-5'>
<div class='d-flex justify-content-end mb-3'><span>SHIBA INU</span></div>
<div class='containera d-flex justify-content-end price' id='show_price_binance_shib'>...</div>
</div>
</div>
</div>
</div>
<script src='live.js'></script>
</body>
</html>

<div id="show_price_binance_shib">的innerText不显示的原因是:before和:after选择器使用position: absolute;样式。

解决方案:

在#show_price_binance_shibdiv中使用span标签来包装点(…)，然后在JavaScript中引用它来改变innerText。

使用z-index属性将span标签提升到:before和:after选择器之上。

编辑代码:

let ws_binance_shib = new WebSocket('wss://stream.binance.com:9443/ws');
// Instead of 'getElementById' method 'querySelector' is used to get the '<span>' tag inside the 'div' 
let html_element_binance_shib = document.querySelector('#show_price_binance_shib span');
let last_price_binance_shib = null;
ws_binance_shib.onopen = function() {
ws_binance_shib.send(JSON.stringify({
'method': 'SUBSCRIBE',
'params': ['shibusdt@trade'],
'id': 1
}))
};
ws_binance_shib.onmessage = function(event) {
let current_price_binance_shib = JSON.parse(event.data);
let price_binance_shib = parseFloat(current_price_binance_shib.p).toFixed(8);
html_element_binance_shib.innerText = price_binance_shib;
if ((price_binance_shib < last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
html_element_binance_shib.innerText = '↓' + price_binance_shib;
html_element_binance_shib.style.color = 'Bright Red';
} else if ((price_binance_shib > last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
html_element_binance_shib.innerText = '↑' + price_binance_shib;
html_element_binance_shib.style.color = 'lime';
} else if ((price_binance_shib == last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
html_element_binance_shib.innerText = price_binance_shib;
html_element_binance_shib.style.color = 'Purple';
}
last_price_binance_shib = price_binance_shib;
};

* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100vh;
background: #29303f;
display: grid;
justify-content: center;
align-content: center;
}

/* containera */
.containera {
width: 350px;
border-radius: 20px;
height: 400px;
background: #1e1e1e;
display: grid;
justify-content: center;
align-content: center;
position: relative;
overflow: hidden;
}
.containera span {
color: #fff;
font-size: 30px;
font-weight: bold;
font-family: arial;
font-family: Consolas, monaco, monospace;
z-index: 1;
/* by this 'z-index: 1;' property the 'span' tag is shown above */
}
.containera::before {
content: '';
position: absolute;
width: 150px;
height: 600px;
left: 75px;
top: -100px;
background: linear-gradient(#00e5ff, #b400fb);
animation: animate 10s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.containera::after {
content: '';
position: absolute;
inset: 5px;
background: #29303f;
border-radius: 18px;
}
.row {
width: 100%;
}
.row span {
font-size: 0.8vw;
font-weight: 700;
}
.col-2 {
font-size: 1.8vw;
font-weight: 700;
border-radius: 2vw;
box-shadow: 10px 10px 25px #e0e0e0;
}
.pair {
font-size: 0.8vw;
font-weight: 500;
}
.price {
font-family: Consolas, monaco, monospace;
}

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Lewendige prys</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
<link rel='stylesheet' type='text/css' href='live.css'>
</head>
<body>
<div>
<div>
<div class='d-flex align-items-center justify-content-center'>
<div class='col-2 p-5 me-5'>
<div class='d-flex justify-content-end mb-3'><span>SHIBA INU</span></div>
<div class='containera d-flex justify-content-end price' id='show_price_binance_shib'><span>...</span></div>
</div>
</div>
</div>
</div>
<script src='live.js'></script>
</body>
</html>

相关内容

最新更新

热门标签：