[英]Can someone help me how to change the color of pseudo span added to the input box when I click on calculate button in code given below
我是 Sandhya，當我單擊下面給出的代碼中的計算按鈕時，我正在嘗試更改添加到左側輸入框中的偽跨度的顏色。 我無法添加代碼，因為它顯示錯誤看起來您的帖子主要是代碼； 請添加更多細節。
*, ::after, ::before { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; }.container { display: flex; width: 100%; height: 100vh; }.leftcontainer { background-color: #e9ecef; width: 20%; height: 100%; }.userprofile::after { content: ""; display: block; background: lightgray; width: 100%; height: 1px; bottom: 0; z-index: 1; position: absolute; }.userprofile img { width: 50px; height: 50px; border-radius: 50%; }.maincontent { width: 100%; padding: 15px; }.maincontent-header p { text-align: justify; font-weight: lighter; font-weight: 200; }.readings { padding-top: 15px; width: 100%; display: flex; flex-direction: column; justify-content: space-around; }.readings input { width: 100px; height: 50px; border: none; padding: 15px; font-weight: 600; }.readings input:focus, button:focus { outline: none; }.readings button:hover { outline: none; background-color: #b5e48c; }.reading-group p { padding-top: 5px; font-size: 10px; padding-bottom: 15px; }.readings button { height: 50px; padding: 8px 8px; background-color: lightgray; border: none; font-size: 15px; font-weight: 600; color: #14213d; cursor: pointer; box-sizing: border-box; }.systolic { position: relative; }.systolic::after { content: ""; display: block; background: lightgray; width: 5px; height: 100%; bottom: 0; z-index: 1; position: absolute; }.diastolic { position: relative; }.diastolic::after { content: ""; display: block; background: lightgray; width: 5px; height: 100%; bottom: 0; left: 0; z-index: 1; position: absolute; } <,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>Blood Pressure Calculator</title> </head> <body> <div class="container"> <div class="leftcontainer"> <div class="maincontent"> <div class="maincontent-header"> <p>Enter your blood pressure reading here;</p> </div> <div class="readings"> <div class="reading-group"> <span class="systolic"><input type="text" id="sys" placeholder="Systolic"></span> <span class="diastolic"><input type="text" id="dys" placeholder="Diastolic"></span> <button type="button" onclick="calculatebp();">Calculate</button> <p>(mm Hg)</p> </div> </div> </div> </div> </body> </html>
代碼到此結束，期待您的支持。
You if you want to change color of pseudo-elements, you can do something like make a new css for a class for a new background color, and add or remove that class using javascript
放這個是css：
.red_pseudo::after{
background: red;
}
現在我在 function 運行時添加 class，因此當 class 添加時，它們的背景顏色將變為紅色
let diastolic_pseudo = document.getElementsByClassName('diastolic')[0]
let systolic_pseudo = document.getElementsByClassName('systolic')[0]
function calculatebp() {
alert('you clicked :)');
diastolic_pseudo.classList.add('red_pseudo')
systolic_pseudo.classList.add('red_pseudo')
}
我想在單擊跨度時找到最接近跨度的輸入元素，你能幫我嗎？
[英]I want to find an input element closest a span when I click the span, can you help me?
當我單擊“計算”按鈕時，它如何獲取每個A，B框中的值，並將這些值傳遞給服務器以計算結果並發出Alert（）？
[英]When I click the “Calculate” button, how can it get the values in each box A,B and pass those value to server to calculate and alert() the result?
單擊按鈕時，如何更改跨度的行以輸入並使用angularjs集中每個輸入
[英]On Button Click, how do I change row with span to input and focus each input using angularjs
當我 select 輸入框時，如何將“您正在輸入數字”放在輸入框的正下方？
[英]How can i put "you are entering a number" right below the input box when i select input box?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.