微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

我应该如何在JavaScript中编写代码以通过双击更改元素的颜色？

分类：编程问答

如何解决我应该如何在JavaScript中编写代码以通过双击更改元素的颜色？

我想编写一个代码，双击将日期的灰色背景更改为红色。我该怎么办？ 此输出后面还有更多文件，但我只附加了相关的文件。

///////////////////////////////////////////////// //////////////////////////////////////////////////// //////////////////////////////////////////////////// //////////

这是输出：

enter image description here

这是我的代码：

// options.js file:

{
  const list = document.getElementById("saved-urls");

  chrome.storage.local.get("scroll-mark",function(result) {
    const urls = result["scroll-mark"];
    let delay = 0.3;
    // if no saved scrolls are available
    const heading = document.getElementById("saved-scroll-heading");
    if (Object.entries(urls).length === 0 && urls.constructor === Object) {
      heading.innerHTML =
        "<h1 id='saved-scroll-heading'>You don't have any saved scrrolls yet!</h1>";
      heading.parentElement.style.height = "100vh";
    } else {
      heading.innerHTML =
        "<h1 id='saved-scroll-heading'>All Saved Scrrolls</h1>";

      const btn = document.createElement("div");
      btn.innerHTML = `
      <div id="delete-button">
        <div class="btn del" id="delete-all"> <img src='./images/bin.png'> </div>
      </div>
      `;
      document.body.appendChild(btn);

      for (var url in urls) {
        const title = urls[url].title || url;
        const url_id = url;
        const div = document.createElement("div");
        div.setAttribute("class","Scroll");
        div.setAttribute(
          "data-date",urls[url].date ? urls[url].date.slice(0,15) : "Date-Here"
        );
        const percentage = Math.round(
          (urls[url].offset / urls[url].total) * 100
        );

        const delete_html = `
        <div class="dropdown" id="${url_id}_|_">
          <div id="${url_id}_|" class="dropdown-content">
                <button class="ScrollElement" id="${url_id}">Delete</button>
          </div>
        </div>
        `;

        if (percentage)
          div.innerHTML =
          "<a href=" +
          url +
          ">" +
          title +
          "</a> " +
          "<div class='perc'>" +
          percentage +
          "</div>" +
          delete_html;
        else
          div.innerHTML =
          "<a href=" +
          url +
          ">" +
          title +
          "</a> " +
          "<div class='perc'>" +
          0 +
          "</div>" +
          delete_html;
        div.style.animationDelay = (delay += 0.1) + "s";
        list.appendChild(div);
      }
    }

    // function to open dropdown menu
    const showDropdown = function(e) {
      const drop_id = this.id.substring(0,this.id.length - 1);
      document.getElementById(drop_id).classList.toggle("show_dropdown");
    };

    // function to close dropdown menu
    const closeDropdown = function(e) {
      const dropdowns = document.getElementsByClassName("dropdown-content");
      if (e.target.className !== "dropdown") {
        for (let i = 0; i < dropdowns.length; i++) {
          dropdowns[i].classList.remove("show_dropdown");
        }
      }
    };

    // all dropdown menus
    const dotElements = document.getElementsByClassName("dropdown");

    for (let i = 0; i < dotElements.length; i++) {
      dotElements[i].addEventListener("click",showDropdown,false);
    }

    const containers = document.getElementsByClassName("container");
    containers[0].addEventListener("click",closeDropdown);

    const scrollElements = document.getElementsByClassName("ScrollElement");
    const deleteallBtn = document.getElementById("delete-all");

    // Todo: use the delete.js script instead
    // but that would require some modifications to the original delete functionality
    const deleteScrollElement = function(element) {
      Swal.fire({
        title: "Are you sure?",text: "This scrroll would be removed from your collection.",type: "warning",showCancelButton: true,confirmButtonColor: "#3085d6",cancelButtonColor: "#d33",confirmButtonText: "Yes,delete it!"
      }).then(result => {
        if (result.value) {
          const {
            [this.id]: _,...restData
          } = urls;
          chrome.storage.local.set({
            "scroll-mark": restData
          },() => {
            chrome.runtime.sendMessage("setInactive");
          });
          let x = document.querySelector(`a[href = "${this.id}"]`);
          x.parentElement.parentElement.removeChild(x.parentElement);
          // window.location.reload();
        }
      });
    };

    const deleteallScrollElement = function(element) {
      Swal.fire({
        title: "Remove all Scrrolls?",text: "This action is not reversible!",confirmButtonText: "Delete All"
      }).then(result => {
        if (result.value) {
          chrome.storage.local.set({
            "scroll-mark": {}
          },data => {});
          window.location.reload();
        }
      });
    };

    for (let i = 0; i < scrollElements.length; i++) {
      scrollElements[i].addEventListener("click",deleteScrollElement,false);
    }
    if (deleteallBtn) {
      deleteallBtn.addEventListener("click",deleteallScrollElement,false);
    }
  });
}
/* options.css file: */

* {
  Box-sizing: border-Box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Bold.ttf") format("truetype");
}

body {
  background: url("./images/bg.jpg");
  /* background: #242a36; */
  min-height: 100vh;
  color: #fff;
}

::-webkit-scrollbar {
  width: 0.3rem;
}

::-webkit-scrollbar-thumb {
  background: #faf8f888;
}

::-webkit-scrollbar-track {
  background: #2229;
}

.container {
  text-align: center;
  height: 90vh;
  perspective: 20cm;
}

.side {
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

h1 {
  font-size: 2.5rem;
  cursor: default;
  /* text-shadow: -5px 5px 5px #000000c9; */
}

.btn {
  width: 100%;
  padding: 5px;
  height: 41px;
  border-radius: 6px;
  font-size: 20px;
  overflow: hidden;
  font-family: "Roboto",sans-serif;
  border-width: 0;
  outline: none;
  margin-bottom: 0.4em;
  Box-shadow: 0 1px 4px rgba(0,0.6);
  background-color: #2ecc71;
  color: #ecf0f1;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn:hover,.btn:focus {
  background-color: #27ae60;
}

.btn>* {
  position: relative;
}

.btn span {
  display: block;
  padding: 12px 24px;
}

.btn:active:before {
  width: 120%;
  padding-top: 120%;
  transition: width 0.2s ease-out,padding-top 0.2s ease-out;
}

.btn.orange {
  background-color: #e67e22;
}

.btn.orange:hover,.btn.orange:focus {
  background-color: #d35400;
}

.btn.del {
  background-color: #fff;
}

.btn.del:hover,.btn.del:focus {
  background-color: #fff;
}

#delete-button {
  position: fixed;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  bottom: 1rem;
  /* width: 100%; */
  /* right: 2rem; */
  right: 50%;
  transform: translate(50%,0) scale(0.98);
  transition: all 0.3s;
  filter: grayscale(20%);
}

#delete-button:hover {
  transform: scale(1) translate(50%,0);
  filter: grayscale(0);
}

#delete-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  padding: 25px 0px;
  text-align: center;
  text-shadow: 1px 1px 3px #555;
  border: 2px solid #ffffff99;
  border-radius: 65px;
  /* transform: translate(0,70px); */
  margin: 10px auto;
  transition: all 0.3s;
  Box-shadow: 0 0 5px 3px #0005;
  z-index: 4;
}

#delete-all:hover {
  border: 2px solid transparent;
  transform: scale(0.9);
}

#delete-all img {
  width: 45px;
  /* filter: invert(100%); */
}

#delete-button::before,#delete-button::after {
  content: "Clear ";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  padding: 5px 15px 5px 10px;
  border-radius: 20px 0px 0px 20px;
  background: #da4332;
  position: relative;
  right: -50px;
  transition: all 0.2s;
  overflow: hidden;
  opacity: 0;
  z-index: 3;
}

#delete-button::after {
  content: " All";
  right: 0;
  left: -50px;
  padding: 5px 20px 5px 25px;
  border-radius: 0px 20px 20px 0px;
}

#delete-button:hover::before {
  right: -15px;
  opacity: 1;
}

#delete-button:hover::after {
  left: -15px;
  opacity: 1;
}

#saved-urls {
  max-width: 1024px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 auto;
}

#saved-urls>div {
  padding: 15px 20px 15px 15px;
  max-width: 20rem;
  margin: 1rem;
  margin-top: 10px;
  text-align: left;
  border: 1px solid #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0px 5px 10px 10px;
  background: #fff;
  background: linear-gradient(to right,#fff,#fdff74);
  background-size: 150%;
  Box-shadow: -1px 2px 5px 3px #00000055;
  cursor: pointer;
  transition: all 250ms ease-out;
  position: relative;
  transform-origin: top;
  animation: flip-in 0.3s forwards;
  opacity: 0;
  transform: rotateX(-15deg);
  z-index: 2;
}

#saved-urls>div:hover {
  Box-shadow: 0 1px 3px 0 rgba(0,0.04),0 10px 25px 0 rgba(0,0.2);
  transform: rotateX(-15deg);
  border-radius: 5px;
  background-position: 100%;
}

@keyframes flip-in {
  0% {
    transform: rotateX(-15deg);
  }
  50% {
    transform: rotateX(10deg);
  }
  70% {
    transform: rotateX(-5deg);
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

#saved-urls>div a {
  max-width: 16rem;
  color: #9e0bad;
  font-weight: bold;
  text-decoration: none;
}

#saved-urls>div .perc {
  margin: 0 0 0 2rem;
  padding: 0.3rem;
  border-radius: 50%;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  max-width: 2.5rem;
  max-height: 2.2rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  /* to maintain circle in the flex Box */
  background: #2ecc71;
  color: white;
  font-weight: bold;
  Box-shadow: 0 1px 2px 2px rgba(0,0.133);
}

#saved-urls>div .perc::after {
  content: "%";
  color: rgb(0,85,14);
  text-shadow: 0 0 2px #0002;
  font-size: 0.7rem;
  position: absolute;
  bottom: 0.1rem;
  right: -0rem;
}

#saved-urls>div::before {
  content: attr(data-date);
  color: rgb(0,0);
  /* text-shadow: 0 0 2px #0002; */
  background: #cacaca;
  transition: all 0.3s;
  font-size: 0.6rem;
  padding: 0.2rem 0.7rem;
  border-radius: 5px;
  position: absolute;
  top: -6px;
  left: -0.3rem;
  /* Box-shadow: 0 1px 3px 1px #ffffff9e; */
}

#saved-urls>div:hover::before {
  background: #f8fc02;
}

.dropdown::after {
  content: "\2807";
  color: #242a36;
  font-size: 20px;
}

.Scroll {
  position: relative;
}

.Scroll .dropdown {
  position: absolute;
  top: 1px;
  right: -2px;
  z-index: 2;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0.9rem;
  top: -1.1rem;
  background-color: #e74c3c;
  min-width: 50px;
  Box-shadow: 0px 8px 16px 0px rgba(0,0.2);
  z-index: 1;
  border-radius: 5px;
}

.dropdown-content button {
  width: 100% !important;
  height: 100%;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  font-family: "Roboto",sans-serif;
  border-width: 0;
  align-content: initial;
  Box-shadow: 0 1px 4px rgba(0,0.6);
  background-color: #e74c3c;
  color: #ecf0f1;
  transition: background-color 0.5s;
}

.dropdown-content button:hover {
  font-family: "Roboto",sans-serif;
  color: #ecf0f1;
  background-color: #c0392b;
  border-radius: 5px;
  cursor: pointer;
}

.dropdown-content.show_dropdown {
  display: block;
  position: absolute;
  transform: scale(1);
  opacity: 1;
  animation: anim 0.3s ease-in-out;
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transform: translateY(-5px);
    transform: translateX(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
<!options.html file:>

<!DOCTYPE html>
<html>

<head>
  <Meta charset="UTF-8" />
  <link href="popup.css" rel="stylesheet" />
</head>

<body>
  <div class="controls">
    <div id="activeContol"></div>
    <div class="options">
      <a target="_blank" href="options.html"><img src="./images/settings.svg" height="28" /></a>
    </div>
  </div>

  <div class="main">
    <p id="message"></p>
    <div id="root"></div>
  </div>
  <script src="popup.js" type="module"></script>
  <div id="tip"></div>
</body>

</html>

解决方法

您可以为此目的使用ondblclick事件。

const date = document.getElementById("date");
date.ondblclick = ()=>{
  date.style.backgroundColor = "red";
}
#date {
  background-color: gray;
  color: white;
  font-family: sans-serif;
  font-size:1.4em;
  cursor: pointer;
}
<div id="date">1/1/1970 (Double Click Me)</div>

通过元素的style属性可以更改背景色。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot