如何將整個CSS圖示包含在onclick程序中？-有解無憂

所以我的問題可能聽起來很平庸，但很煩人。當我單擊 css 手風琴中的 css 圖示時，我必須單擊字母 URL，以便將鏈接復制到剪貼板中。到目前為止，代碼作業正常。

但是，當我單擊 css 圖示的白色邊框（在 URL 字母的上方和下方）時，我希望整個事情也能正常作業。

我需要更改哪些內容才能將整個 CSS 圖示包含在 JS onclick 程序中？

```

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
input {
  display: none;
}
label {
  display: block;    
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}
label:hover {
  background: white;
  border: 1px solid white;
  color:black;
}
label::after {
  content: ' ';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}
input:checked   label::after {
  content: '-';
  right: 14px;
  top: 3px;
}
.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}
input   label   .content {
  display: none;
}
input:checked   label   .content {
  display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 
</style>
</head>
<body>

<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>

<div class="content">

<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>

</div>

<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>

<div class="content">

<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>

</div>

<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>

<div class="content">

<div class="tooltip">
 <div class="whitepaper" onclick="myFunction(event)">
  <div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
 </div>
 <input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>

</div>

<script>
function myFunction(event) {
  /* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText);

  /* Alert the copied text */
  alert("Copied: "   copyText);
} 
</script>

</body>
</html>

```

uj5u.com熱心網友回復：

放棄 onclick，用你的白皮書類宣告你的工具提示，然后使用一個帶有點擊事件監聽器的函式

let tooltip = document.querySelectorAll(".whitepaper");

for (let i = 0; i < tooltip.length; i  ) {
  tooltip[i].addEventListener("click", function() {
    var copyText = event.target.nextSibling.nextSibling.value
    navigator.clipboard.writeText(copyText);
    alert("Copied: "   copyText);
  });
}

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}

input {
  display: none;
}

label {
  display: block;
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}

label:hover {
  background: white;
  border: 1px solid white;
  color: black;
}

label::after {
  content: ' ';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}

input:checked label::after {
  content: '-';
  right: 14px;
  top: 3px;
}

.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}

input label .content {
  display: none;
}

input:checked label .content {
  display: block;
}

.whitepaper {
  cursor: pointer;
  text-align: center;
  background-color: white;
  border: 2px solid black;
  border-radius: 3px;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}

.blackframe {
  text-align: center;
  background-color: black;
  cursor: pointer;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 12px 0 12px 0;
  color: white;
  width: 30px;
  pointer-events: none;
}

.whitepaper:hover {
  cursor: pointer;
  text-align: center;
  background-color: black;
  border: 2px solid white;
  border-radius: 3px;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}


/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}


/* Tooltip arrow */

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<!DOCTYPE html>
<html>

<head>
  <title>My example Website</title>
</head>

<body>

  <input type="checkbox" id="title1" name="contentbox" />
  <label for="title1">Content 1</label>

  <div class="content">

    <div class="tooltip">
      <div class="whitepaper">
        <div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
      </div>
      <input type="text" value="https://mywebsite.com/#title1" id="myInput">
    </div>

  </div>

  <input type="checkbox" id="title2" name="contentbox" />
  <label for="title2">Content 2</label>

  <div class="content">

    <div class="tooltip">
      <div class="whitepaper">
        <div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
      </div>
      <input type="text" value="https://mywebsite.com/#title2" id="myInput">
    </div>

  </div>

  <input type="checkbox" id="title3" name="contentbox" />
  <label for="title3">Content 3</label>

  <div class="content">

    <div class="tooltip">
      <div class="whitepaper">
        <div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
      </div>
      <input type="text" value="https://mywebsite.com/#title3" id="myInput">
    </div>
  </div>

</body>

</html>

```

uj5u.com熱心網友回復：

我現在已經解決了這個問題。Stackoverflow 上的某個人幫助我通過使用線性漸變將兩個 DIV 元素合并為一個。現在代碼在這兩個欄位上都能完美運行，因為它現在是一個 div。所以簡而言之，我不得不稍微改進一下 CSS 代碼，問題就解決了。盡管如此，感謝所有花時間幫助我的人，但這次的解決方案與最初的預期不同。

這是它如何作業的完整示例：

```

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;    
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: ' ';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked   label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input   label   .content {
display: none;
}
input:checked   label   .content {
display: block;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background: linear-gradient(to top, white 12px, black 12px, black 28px, white 28px);
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size:12px;
font-weight:bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background: linear-gradient(to top, black 12px, white 12px, white 28px, black 28px);
border: 2px solid white;
border-radius: 3px;
color: black;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
 /* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

  /* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;

  /* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
} 
</style>
</head>
<body>

<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>

<div class="content">

<div class="tooltip">
  <div class="whitepaper" onclick="myFunction(event)">
   <span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
  </div>
 <input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>

</div>

<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>

<div class="content">

<div class="tooltip">
  <div class="whitepaper" onclick="myFunction(event)">
   <span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
  </div>
 <input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>

</div>

<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>

<div class="content">

<div class="tooltip">
  <div class="whitepaper" onclick="myFunction(event)">
   <span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
  </div>
 <input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>

</div>

<script>
function myFunction(event) {
  /* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText);

  /* Alert the copied text */
  alert("Kopiert: "   copyText);
}
</script>

</body>
</html>

```

uj5u.com熱心網友回復：

單擊下方或上方時，這不會向您打開警報，但也不會顯示錯誤。

只需將 onClick 事件放在“blackFrame” div 中。

```

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
input {
  display: none;
}
label {
  display: block;    
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}
label:hover {
  background: white;
  border: 1px solid white;
  color:black;
}
label::after {
  content: ' ';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}
input:checked   label::after {
  content: '-';
  right: 14px;
  top: 3px;
}
.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}
input   label   .content {
  display: none;
}
input:checked   label   .content {
  display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 
</style>
</head>
<body>

<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>

<div class="content">

<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>

</div>

<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>

<div class="content">

<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>

</div>

<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>

<div class="content">

<div class="tooltip">
 <div class="whitepaper">
  <div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
 </div>
 <input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>

</div>

<script>
function myFunction(event) {
  /* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText);

  /* Alert the copied text */
  alert("Copied: "   copyText);
} 
</script>

</body>
</html>

```

據我所知，并基于此檔案https://www.w3schools.com/tags/tag_span.asp，我認為您無法使用 Span 標簽做您想做的事。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/490220.html

標籤：javascript html css 网址点击

上一篇：在表格單元格上方放置一個按鈕并垂直對齊單元格中的文本

下一篇：在片段中將方向鎖定為橫向