javascript - 当我单击下面给出的代码中的计算按钮时,有人可以帮助我如何更改添加到输入框中的伪跨度的颜色
问题描述
我是 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>
代码到此结束,期待您的支持。
解决方案
如果你想改变伪元素的颜色,你可以做一些事情,比如为一个新的背景颜色的类创建一个新的 css,并使用 javascript 添加或删除该类
把这是css:
.red_pseudo::after{
background: red;
}
现在我在函数运行时添加类,因此当添加类时,它们的 bg 颜色将变为红色
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')
}
推荐阅读
- sql - 如何编写从源数据表计算结果集列的 SQL 查询
- android - 关于内存泄漏的android MVP模式
- php - 搜索列 mysql 中存在的确切字符串
- sql - How to do a web request call to sqlpad?
- nativescript - RadListView loadOnDemandMode 指示器背景颜色
- reactjs - 反应:正确的错误
- html - Blogger - iframe 代码不起作用,经过建议的更正后,它没有出现在我的博客上
- javascript - Javascript 无法提取 CSS 值
- html - 调整页面中间部分的大小,同时保持其子项受到限制
- c# - Windows进程退出后如何将参数传递给动态函数?