搜索
搜索

更改元素中的状态

user3378613 发表于 Dev
19
用户名

当我单击该元素时，它变为“按下”（我在检查时看到了），但是它并没有占用.pressedCSS内部的内容。

我究竟做错了什么？

    function date()
{
    var myDate = new Date();
    day = myDate.getDate();
    month = myDate.getMonth();
    year = myDate.getFullYear();

    var months = ["Ιανουαρίου", "Φεβρουαρίου","Μαρτίου", "Απριλίου", "Μαΐου", "Ιουνίου", "Ιουλίου", "Αυγούστου", "Σεπτεμβρίου", "Οκτωβρίου", "Νοεμβρίου","Δεκεμβρίου"];
    month = months[month];
    document.getElementById("date").innerHTML = day + " " + month + " " + year;
}

window.onload = function() {
  let state = document.querySelectorAll('.state');
  
  state.forEach(function(state_curr, i) {
  state_curr.addEventListener('click', function() {
  this.classList.toggle('pressed');
  })
  })
  }

/*function changestate()
{
    document.querySelector("#state").classList.toggle("pressed");
}*/

//Preventing content framing
/*window.onload=function()
{if(top!=window)top.location=window.location;}*/

//Preventing URL spoofing and polluting
var url = location.href;
var p = url.indexOf("?");
if (p >= 1)
{
  url = url.slice(0,p);
  self.location.replace(url);
}

//Preventing mail address harvesting
function display(id, name, domain, tld)
{
  document.getElementById(id).innerHTML = name + "" + "@" + "" + domain + "." + tld;
}
function send(name, domain, tld)
{
  location.href="mailto:" + name + "" + "@" + "" + domain + "." + tld;
}
    body {
  padding: 50px 0px 0px 0px;
  z-index: 0;
  background-color: #e3edf7;
  font-family: helvetica, arial, verdana;
}

.navbar-dark {
  background-image: linear-gradient(to right, purple, MidnightBlue);
  font-weight: bold;
}

#date {
  position: absolute;
  top: 60px;
  right: 17px;
  pointer-events: none;
  font-weight: bold;
  font-size: 18px;
  color: rgba(49, 69, 106, 1);
}

.contact {
  position: absolute;
  right: 10px;
}

#panel {
  margin-top: 40px;
}

.elements > div {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.01);
  border-radius: 15px;
  padding: 22px;
  box-shadow: 15px 5px 20px -10px rgba(0, 0, 0, 0.15), -15px -5px 20px -10px rgba(255, 255, 255, 0.8);
}

.elements > div i {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.01);
  color: rgba(49, 69, 106, 0.6);
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.elements > div.pressed i {
  border-color: rgba(0, 0, 0, 0.01);
  color: rgba(49, 69, 106, 1);
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
    -0.5px -0.5px 0 rgba(255, 255, 255, 1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}

.elements > div span.object {
  position: absolute;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: rgba(49, 69, 106, 0.8);
  padding-left: 14px;
  margin-top: 5px;
}

.elements > div span.object span {
  display: block;
  font-weight: 400;
  color: rgba(49, 69, 106, 0.5);
}

.elements:not(last-child) {
  margin-bottom: 12px;
}

#temp {
  text-align: center;
  margin-top: 30px;
}

.temperature {
  position: relative;
  display: inline-block;
  width: 230px;
  height: 230px;
  border-radius: 100%;
  text-align: center;
  box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.1), -30px -30px 30px -10px rgba(255, 255, 255, 0.4),
    -0.5px -0.5px 0 rgba(255, 255, 255, 1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.02);
}

.temperature > span {
  position: relative;
  display: inline-block;
  top: 50%;
  transform: translateY(-60%);
}

.temperature > span > span.temp-data {
  font-size: 60px;
  font-weight: 600;
  display: block;
  color: rgba(49, 69, 106, 1);
}

.temperature > span > span.temp-data sup {
  position: absolute;
  font-size: 15px;
  font-weight: 500;
  top: 24%;
}

.temperature > span > span.temp-info {
  position: absolute;
  font-size: 14px;
  font-weight: 500;
  color: rgba(49, 69, 106, 0.6);
  white-space: nowrap;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.temperature:before {
  position: absolute;
  content: "";
  display: block;
  width: 88%;
  height: 88%;
  border-radius: inherit;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7);
}

.temperature:after {
  position: absolute;
  content: "";
  display: block;
  width: 78%;
  height: 78%;
  border-radius: inherit;
  left: 50%;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.01);
  transform: translateX(-50%) translateY(-50%);
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7);
}
    <!DOCTYPE html>

<html lang="el">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" />

    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <script src="js/javascript.js"></script>

    <title>Έξυπνο σπίτι</title>
  </head>

  <body onload="date()">
    <nav class="navbar navbar-dark navbar-expand-xl fixed-top">
      <span class="navbar-brand mb-0 h1"><i class="fas fa-home"></i><b> Έξυπνο σπίτι</b></span>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-door-open"></i> Χωλ</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./saloni.html"><i class="fas fa-tv"></i> Σαλόνι</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./diadromos.html"><i class="fas fa-shoe-prints"></i> Διάδρομος</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./domatio.html"><i class="fas fa-bed"></i> Δωμάτιο</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./kouzina.html"><i class="fas fa-sink"></i> Κουζίνα</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./toualeta.html"><i class="fas fa-toilet"></i> Τουαλέτα</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./krevatokamara.html"><i class="fas fa-bed"></i> Κρεβατοκάμαρα</a>
          </li>
          <li class="nav-item contact">
            <a class="nav-link" href="./epikoinonia.html"><i class="far fa-address-card"></i> Επικοινωνία</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="container-fluid">
      <span id="date"></span>
      <div id="panel" class="col-12">
        <div class="row">
          <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements">
            <div class="state">
              <i class="far fa-lightbulb"></i>
              <span class="object"> Λάμπα </span>
            </div>
          </div>
          <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements">
            <div class="state">
              <i class="fas fa-plug"></i>
              <span class="object"> Πρίζα </span>
            </div>
          </div>
          <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements">
            <div>
              <i class="fa fa-wifi"></i>
              <span class="object">
                Ίντερνετ
                <span>20 mbps</span>
              </span>
            </div>
          </div>
          <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements">
            <div>
              <i class="fa fa-fire"></i>
              <span class="object">
                Υγρασία
                <span>65%</span>
              </span>
            </div>
          </div>
          <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements">
            <div>
              <i class="far fa-lightbulb"></i>
              <span class="object"> Λάμπα </span>
            </div>
          </div>
          <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements">
            <div>
              <i class="far fa-lightbulb"></i>
              <span class="object"> Λάμπα </span>
            </div>
          </div>
        </div>
      </div>

      <div id="temp" class="col-12">
        <div class="row">
          <div class="col-12">
            <span class="temperature">
              <span>
                <span class="temp-data"> 16 <sup>&deg;C</sup> </span>
                <span class="temp-info"> <i class="fa fa-snowflake-o"></i> Ψύξη </span>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

谢尔盖·库兹涅佐夫

您需要定义你拨动类pressed的#state在CSS。

像这样：

为id="state"：

#state.pressed {
  border-color: rgba(0, 0, 0, 0.01);
  color: rgba(49, 69, 106, 1);
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
      -0.5px -0.5px 0 rgba(255, 255, 255, 1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}

为class="state"：

.state.pressed {
  border-color: rgba(0, 0, 0, 0.01);
  color: rgba(49, 69, 106, 1);
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
            -0.5px -0.5px 0 rgba(255, 255, 255, 1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}

这是使用的可复制示例forEach()。即，确定当前单击的元素，并为该元素分配/删除一个类。请注意，我从html结构中onclick="changestate()"从类中删除了事件state。在html的标记内编写事件是一种不良习惯：)

window.onload = function() {
let state = document.querySelectorAll('.state');

  state.forEach(function(state_curr, i) {
      state_curr.addEventListener('click', function() {
       this.classList.toggle('pressed');
    })
  })
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

当数组中的一个对象状态为“已确认”时如何更改元素？

更改元素在jwplayer中的位置？

不断更改元素中的文本

根据选择中的选项更改元素

无法在HTML中更改元素

在新线程中更改元素属性

如何更改元素中的数字

更改元素位置

更改元素的尺寸

更改元素的textContent

更改元素的类

更改元素内容

在javascript函数中更改元素>元素样式

在php中的关联数组中更改元素的位置

当另一个元素处于活动状态时更改元素的样式

如何更改元素在 flex 容器中的位置？

如何通过 React 中的 url 动态更改元素的类？

反转类中的数组不会更改元素的顺序

在 Selenium Python 中更改元素的显示不起作用

我可以在CSS中更改元素的父级吗？

如何在ReactJs中动态更改元素的位置？

更改元素的externalHTML会将其从数组中删除

无法在查看器中更改元素颜色

如何在Angular中动态更改元素的ID？

在html / css中更改元素顺序的问题

如何在.asmx响应中更改元素名称？

更改元素显示时文本从div中移出

在Angular 2中的ViewChild上更改元素类

在angularjs指令链接函数中更改元素类

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档