javascript - 知道每个元素何时具有相同的 CSS 属性值

标签 javascript html 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 和 red，然后像这样切换它们: 

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 类而不是内联样式也会更简洁、更短，从而提高网站性能。

关于javascript - 知道每个元素何时具有相同的 CSS 属性值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50204542/

上一篇：javascript - HTML 和 SVG 如何用鼠标单击只移动一条线的一个端点？

下一篇：javascript - 在鼠标悬停时删除另一个 DOM 对象中第 n 个元素的类

相关文章：

javascript - Ajax 和就绪状态

html - 在表格单元格内分层图像

javascript - 关闭按钮在 Chrome 中不起作用

html - 子 div 和父 div 一样高

javascript - 如何使用 #webpack 测量所有源代码的覆盖率？

javascript - 将 javascript (d3.js) 绑定(bind)到 shiny

javascript - 如何使用 Angular Material 打开选项卡上的菜单？

css - 响应式视频 CSS

css - Antd 在非折叠的 Sider 上将工具提示应用于 Menu.Item

html - 滚动时我的 body 背景颜色消失

©2024 IT工具网  联系我们