javascript - 知道每个元素何时具有相同的 CSS 属性值
问题描述
我正在制作一个表格,使用一些圆圈向用户显示该字段是否正确填写。
我希望能够知道所有圆圈何时都是绿色的,然后更改提交按钮的背景颜色。
如果您不明白,只需全屏运行代码段,您就会看到。
// Système de toggleBox
var toggleCanvas = document.getElementById('newsteller');
let n_state = true;
function toggleNewsteller() {
if (getComputedStyle(document.getElementById('newsteller')).backgroundColor == "rgb(180, 223, 180)") {
n_state = false;
} else {
n_state = true;
}
if (n_state == false) {
document.getElementById('newsteller').style.backgroundColor = "hsl(120, 3%, 93%)";
} else if (n_state == true) {
document.getElementById('newsteller').style.backgroundColor = "rgb(180, 223, 180)";
}
}
function blur_check(id) {
var element_base = document.getElementById(id);
var circleSibling = getCircle(element_base);
if (getComputedStyle(circleSibling).backgroundColor == "rgb(237, 238, 237)") {
circleSibling.style.backgroundColor = 'rgb(180, 223, 180)';
}
if (element_base.value == "") {
circleSibling.style.backgroundColor = 'rgb(255, 127, 123)';
}
}
function characters_check(sample) {
var arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "@", ";", ":", "/", "+", ")", "&", "(", "?", "!", "-", "_", "%", "*", ":", ";", "`", "^", "$"]
for (var i = arr.length - 1; i >= 0; --i) {
if (sample.indexOf(arr[i]) != -1) {
return true;
}
}
}
function passwordBlur() {
var element = document.getElementById('mdpbis');
var circleSibling = getCircle(element);
if (getComputedStyle(circleSibling).backgroundColor == "rgb(237, 238, 237)") {
circleSibling.style.backgroundColor = 'rgb(255, 127, 123)';
}
}
function email_check() {
var circleSibling = getCircle(document.getElementById('email'));
var emailString = document.getElementById('email').value;
var arr = ["@"]
for (var i = arr.length - 1; i >= 0; --i) {
if (emailString.indexOf(arr[i]) != -1) {
var arr = ["."]
for (var i = arr.length - 1; i >= 0; --i) {
if (emailString.indexOf(arr[i]) != -1) {
circleSibling.style.backgroundColor = 'rgb(180, 223, 180)';
} else {
circleSibling.style.backgroundColor = 'rgb(255, 127, 123)';
}
}
} else {
circleSibling.style.backgroundColor = 'rgb(255, 127, 123)';
}
}
}
function getCircle(elements) {
while (elements = elements.nextSibling) {
if (elements.className === 'circle') {
return elements;
}
}
return false
}
function prenom_confirmation() {
var prenom = document.getElementById('prenom');
var circleStyle = getCircle(prenom).style;
if (characters_check(prenom.value) == true) {
circleStyle.backgroundColor = 'rgb(255, 127, 123)';
} else {
circleStyle.backgroundColor = "rgb(237, 238, 237)";
}
}
function nom_confirmation() {
var nom = document.getElementById('nom');
var circleStyle = getCircle(nom).style;
if (characters_check(nom.value) == true) {
circleStyle.backgroundColor = 'rgb(255, 127, 123)';
} else {
circleStyle.backgroundColor = "rgb(237, 238, 237)";
}
}
function username_confirmation() {
var username = document.getElementById('username');
var circleStyle = getCircle(username).style;
if (characters_check(username.value) == true) {
circleStyle.backgroundColor = 'rgb(255, 127, 123)';
} else {
circleStyle.backgroundColor = "rgb(237, 238, 237)";
}
}
function email_confirmation() {
var email = document.getElementById('email');
var circleStyle = getCircle(email).style;
if (characters_check(email.value) == true) {
circleStyle.backgroundColor = "rgb(237, 238, 237)";
} else {
circleStyle.backgroundColor = 'rgb(255, 127, 123)';
}
}
function mdp_confirmation() {
mdp_check()
var mdp = document.getElementById('mdp');
var circleStyle = getCircle(mdp).style;
if (characters_check(mdp.value) == true && mdp.value.length >= 6) {
circleStyle.backgroundColor = 'rgb(180, 223, 180)';
} else {
circleStyle.backgroundColor = '#FFE68D';
}
}
function mdp_check() {
var mdp = document.getElementById('mdp');
var circleMdp = getCircle(mdp);
var mdpbis = document.getElementById('mdpbis');
var circleMdpbis = getCircle(mdpbis);
if (mdpbis.value == mdp.value) {
circleMdpbis.style.backgroundColor = getComputedStyle(circleMdp).backgroundColor;
} else if (mdpbis.value !== mdp.value) {
circleMdpbis.style.backgroundColor = "rgb(237, 238, 237)";
}
}
* {
margin: 0px;
padding: 0px;
font-family: 'Futura', sans-serif;
-webkit-font-smoothing: anatialised;
}
::selection {
background: wheat;
}
a {
text-decoration: none;
}
body {
background: #DEDEDE;
}
input:focus,
select:focus {
outline: none;
}
.login-form-window {
margin-top: 50px;
width: 90%;
margin-left: 5%;
background: white;
display: block;
box-shadow: 1px 10px 40px 0px rgba(0, 0, 0, 0.10);
}
.window-header {
background: wheat;
color: hsl(120, 3%, 30%);
font-size: 28px;
padding: 10px;
font-weight: 100;
font-weight: 100;
}
.window-info {
padding: 10px;
color: hsl(120, 3%, 60%);
}
.description {
font-size: 19px;
color: hsl(120, 2%, 20%);
padding: 10px;
}
.input-des {
color: hsl(120, 3%, 35%);
margin: 10px;
}
.padding-right {
margin-right: 30px;
}
.form_col {
display: inline-block;
margin-right: 15px;
padding: 3px 0px;
width: 300px;
min-height: 1px;
text-align: right;
}
.text-input {
border: none;
background: hsl(120, 3%, 93%);
width: 150px;
height: 30px;
border-radius: 5px;
padding-left: -2px;
font-size: 15px;
text-align: center;
text-decoration: none;
}
.circle {
margin-left: 20px;
height: 30px;
width: 30px;
border-radius: 15px;
background-color: hsl(120, 3%, 93%);
vertical-align: bottom;
}
.select-country {
height: 30px;
border: none;
background: hsl(120, 3%, 93%);
font-size: 15px;
}
.checkbox {
width: 22px;
height: 22px;
border: none;
background: rgb(180, 223, 180);
border-radius: 4px;
vertical-align: sub;
}
.checkbox,
.submit-button {
cursor: pointer;
}
.submit-button {
padding: 3px 0px;
display: inline-block;
margin-right: 15px;
width: 300px;
border-radius: 5px;
text-align: center;
width: 200px;
background-color: hsl(120, 3%, 93%);
font-size: 19px;
color: hsl(120, 3%, 30%);
}
.submit-button::selection {
background: none;
}
#text::selection {
background: none;
}
<section class="login-form-window">
<p class="window-header">CREER UN COMPTE</p>
<p class="window-info"><a>Samedi 5 Mai</a><a style="float:right">Formulaire d'Inscription</a></p><br>
<form id="form">
<label class="description form_col" id="sex">Sexe:</label>
<input type="radio" name="sex" value="H" class="radio-input" checked="1"><label class="input-des padding-right">Homme</label>
<input type="radio" name="sex" value="F" class="radio-input"><label class="input-des padding-right">Femme</label>
<input type="radio" name="sex" value="O" class="radio-input"><label class="input-des">Autre</label><br><br>
<label class="description form_col">Prénom:</label>
<input id="prenom" type="text" name="prenom" value="" oninput="prenom_confirmation()" class="text-input prenom" autocomplete="given-name" onblur="blur_check('prenom')">
<canvas class="circle"></canvas>
<br><br>
<label class="description form_col">Nom:</label>
<input id="nom" type="text" name="nom" value="" oninput="nom_confirmation()" class="text-input nom" autocomplete="name" onblur="blur_check('nom')">
<canvas class="circle" id="nom"></canvas>
<br><br>
<label class="description form_col">Username:</label>
<input id="username" type="text" name="username" value="" oninput="username_confirmation()" class="text-input username" autocomplete="username" onblur="blur_check('username')">
<canvas class="circle" id="username"></canvas>
<br><br>
<label class="description form_col">Email:</label>
<input id="email" type="text" name="email" value="" class="text-input email" autocomplete="name" onblur=" email_check()" style="width:200px;">
<canvas class="circle" id="email"></canvas>
<br><br>
<label class="description form_col">Mot de passe:</label>
<input id="mdp" type="password" name="mdp" value="" oninput="mdp_confirmation()" class="text-input mdp" autocomplete="new-password" onblur="blur_check('mdp')">
<canvas class="circle" id="mdp"></canvas>
<br><br>
<label class="description form_col">Mot de passe (confirmation):</label>
<input id="mdpbis" type="password" name="mdpbis" value="" class="text-input mdpbis" autocomplete="new-password" oninput="mdp_check()" onblur="passwordBlur()">
<canvas class="circle" id="mdp-bis"></canvas>
<br><br>
<label class="description form_col">Pays de résidence:</label>
<select class="select-country" name="country">
<option value="">France</option>
<option value="">Belgique</option>
<option value="">Suisse</option>
<option value="">Luxembourg</option>
<option value="">États Unis</option>
<option value="">Allemagne</option>
<option value="">Pays-Bas</option>
<option value="">Norvège</option>
</select>
<br><br>
<label class="description form_col">Newsteller:</label>
<canvas class="checkbox" id="newsteller" onclick="toggleNewsteller()"></canvas><br><br>
<label class="description form_col"></label>
<div class="form_col submit-button" id="newsteller" onclick="">SUBMIT</div>
<br><br>
</form>
</section>
解决方案
只需遍历每个圆圈并检查它的背景颜色值,如下所示:
var x = document.querySelectorAll('.circle'); // get all circle elements
var y="";
x.forEach(circ => { //loop through each circle to check bg-color
if (circ.style.backgroundColor !== 'rgb(180, 223, 180)') {
y += '0';
} else {
y += '1';
}
});
if ( y.indexOf("0") > -1 ) { // are there red circles?
console.log('dont do anything'); //yes there are
} else {
console.log('run submit button css change function'); // no there aren't. go ahead and run a function to change submit css here
}
但是,正如@TemaniAfif提到的,我建议您将绿色的背景颜色添加到css 类中,green
然后像这样切换它们:
if (emailString.indexOf(arr[i]) != -1) {
circleSibling.classList.add('green');
circleSibling.classList.remove('red');
} else {
circleSibling.classList.add('red');
circleSibling.classList.remove('green');
}
并将上面的第一个片段替换为:
var x = document.querySelectorAll('.circle'); // get all circle elements
x.forEach(circ => { //loop through each circle to check bg-color
if (circ.classList.contains('green')) {
y += '1';
} else {
y += '0';
}
});
if ( y.indexOf("0") > -1 ) { // are there red circles?
console.log('dont do anything'); //yes there are
} else {
console.log('run submit button css change function'); // no there aren't. go ahead and run a function to change submit css here
}
如果您有很多圈子,那么切换 CSS 类而不是内联样式也更简洁、更短,这会带来更好的网站性能。
推荐阅读
- ios - 代码签名对于证明所有权至关重要吗?
- python - Python按多列压缩行 - groupby 丢弃不应该的组?
- javascript - 在 JHipster (v5.82) 项目中包含自定义类型
- java - 如何在 TextView 上显示 Auto Scrolling RecyclerView 位置?
- python - 使用 pandas 优化应用于系列的散列
- github - 发布时如何关闭 GitHub 生成(和损坏)的 tarball?
- android - 使用整数值动态更改按钮颜色
- excel - Excel:求和仅在可见单元格上重复一次值
- laravel - 迁移的外键问题
- objective-c - NSCollectionViewGridLayout 在单行中,可调整大小的集合项保持纵横比?