如何在框中換行更多-有解無憂

我想知道如何將它放入一個彩色的圓形框中以使其從背景中彈出一點。我將在下面提供我的目標圖片顏色：#23272a 或 rgb(35, 39, 42)

如何在框中換行更多

我在這里粘貼了我的 app.js：

let stockPriceElement = document.getElementById('shib-worth');
let lastPrice = null;

ws.onmessage = (event) => {
    let stockObject = JSON.parse(event.data);
    let price = parseFloat(stockObject.p).toFixed(8);
    let shib_start_price = 0.00003442;
    let shib_balance = 7263219;
    let shib_start_worth = shib_start_price * shib_balance;
    let shib_worth_now = price * shib_balance;
    let convert_shib_worth_to_gbp = shib_worth_now / 100 * 73
    stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
    stockPriceElement.style.textAlign = "center";
    stockPriceElement.style.color = convert_shib_worth_to_gbp === shib_start_worth ? '#9e9e9e' : convert_shib_worth_to_gbp > shib_start_worth ? '#4caf50' : '#f44336';
    stockPriceElement.style.fontFamily = 'Sora', sans-serif;
    lastPrice = convert_shib_worth_to_gbp
};

我在這里粘貼了我的 index.html：

<!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>Test</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body style="background-color:rgb(44, 47, 51);">
<h1 id="shib-worth"></h1>
<script src="app.js"></script>
</body>
</html>

我還希望添加一個與數字對齊的靜態“￡”符號（在帶有它的框內）以相同的字體但顏色為：白色

感謝和親切的問候！

uj5u.com熱心網友回復：

使用 css 類而不是樣式屬性，然后調查 border-radius。對于您的￡，請考慮使用 CSS Pseudo 元素作為內容。

body {
  background-color: #333;
}

.stock-price {
  /*Rounded corners*/
  border-radius: 5px;
  /*The following is basic styling adjust as needed*/
  padding: 10px;
  font-size: 16px;
  font-family: 'Sora', sans-serif;
  text-align: center;
  background-color: #666;  
  margin: 6px;
  width: 100px;
}

/*Pseudo element for pound sign*/
.stock-price::before {
  content: '￡';
  color: white;
}

/*Classes to indicate price movement*/
.stock-price.no-change {
  color: #9e9e9e;
}

.stock-price.loss {
  color: #f44336;
}

.stock-price.gain {
  color: #4caf50;
}

<div class="stock-price no-change">123</div>
<div class="stock-price loss">456</div>
<div class="stock-price gain">123</div>

然后將您的 js 更新為（洗掉所有樣式代碼）：

stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
/*Add base class*/
stockPriceElement.classList.add('stock-price');
/*Add appropriate price movement class*/
stockPriceElement.classList.add(convert_shib_worth_to_gbp === shib_start_worth ? 'no-change' : convert_shib_worth_to_gbp > shib_start_worth ? 'gain' : 'loss');

uj5u.com熱心網友回復：

正如@JonP 提到的，您可以創建 CSS 類并洗掉stockPriceElement.style.*JavaScript 代碼中的使用。只需使用將您需要的類添加到該 DOM 元素stockPriceElement.classList.add()。要在每個股票價格的開頭包含“￡”圖示，請創建一個::before偽元素并將該圖示添加為其content屬性。

顯示代碼片段

let stockPriceElement = document.getElementById('shib-worth');
let lastPrice = null;

// `ws` wasn't defined in your code
ws.onmessage = (event) => {
    let stockObject = JSON.parse(event.data);
    let price = parseFloat(stockObject.p).toFixed(8);
    let shib_start_price = 0.00003442;
    let shib_balance = 7263219;
    let shib_start_worth = shib_start_price * shib_balance;
    let shib_worth_now = price * shib_balance;
    let convert_shib_worth_to_gbp = shib_worth_now / 100 * 73
    stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
    // Add the text-align and font-family declaration 
    // to a CSS class
    stockPriceElement.classList.add("stock-price");
    // This could also be broken into separate color
    // classes to add/toggle based on the conditional logic
    stockPriceElement.style.color = convert_shib_worth_to_gbp === shib_start_worth ? '#9e9e9e' : convert_shib_worth_to_gbp > shib_start_worth ? '#4caf50' : '#f44336';
    lastPrice = convert_shib_worth_to_gbp
};

:root {
  --grey: #9e9e9e;
  --green: #4caf50;
  --red: #f44336;
}

body {
  background-color: rgb(44, 47, 51);
}

.stock-price {
  padding: 10px 12px;
  text-align: center;
  font-size: 1.5rem; /* Vary this how you would like */
  font-family: 'Sora', sans-serif;
  border-radius: 3px;
  color: var(--green);
  background: rgb(35, 38, 41);
  width: fit-content;
  -moz-width: fit-content; /* For Firefox */
}

/* Create a Pseudo element to represent the icon */
.stock-price::before {
  content: "￡";
  color: #fff;
  margin-right: 4px;
}

.red {
 color: var(--red);
}

<!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>Test</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
<h1 id="shib-worth" class="stock-price">377.41</h1>
<h1 id="shib-worth" class="stock-price red">377.41</h1>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344711.html

標籤：javascript html css

上一篇：具有最小高度的英雄影像：100vh太大

下一篇：將背景img添加到每個boostrap輪播專案

如何在框中換行 更多

如何在框中換行更多