更改单击的链接 SPAN 标记上的颜色

change color on clicked linked span tag

本文关键字：颜色 链接 单击 SPAN      更新时间：2023-09-26

我有一个跨度正方形，里面有其他跨度类。跨度正方形是链接的，因此该正方形内的所有内容也是链接的。我想知道如果单击正方形是否可以更改跨度正方形的背景颜色？

感谢您的回答！

这就是 css 的目的，所以我会在"跳"到 javascript 之前使用它。

我会使用:visited选择器，它用于选择访问过的链接。

：visited是一个伪类选择器，用于锚链接元素 访问该锚点链接的 href 属性时匹配 过去由此浏览器使用。~源

此用法的基本示例如下所示：

a:visited{
  color:red;
  }
<div>
  
  <span><a href="#">1</a></span>
    <span><a href="##">2</a></span>
    <span><a href="###">3</a></span>
    <span><a href="####">4</a></span>
  </div>

var elements = document.querySelectorAll( "span" );
for( var e in elements ){
    if( e.match( /'D/ ) continue;
    elements[e].addEventListener &&
    elements[e].addEventListener( 
        "click", 
        function(){ this.style.backgroundColor = "#800" } 
        ) ||
    elements[e].attachEvent && 
    elements[e].attachEvent( 
        "onclick", 
        function(){ this.style.backgroundColor = "#800" } 
        );
}

我更喜欢使用 CSS 并直接访问目标元素的解决方案（如果 DOM 包含数百个可能会很吵）

正如您在jsfiddle上的此代码片段中看到的那样，您可以添加和删除CSS类以更改背景

.square{ width: 120px; height: 150px; display: inline-block;}
.green{ background-color: #11EE00}
.red{ background-color: #EE1100}
<span id="mySpan" class="square green">Hello world!</span>

window.onload = function() {
    document.getElementById("mySpan").onclick = function () {
        Change(this);
    }
}

function Change(e){
    removeClass(e, "green");
    addClass(e,"red");
}
function addClass(element, classToAdd) {
    var currentClassValue = element.className;
    if (currentClassValue.indexOf(classToAdd) == -1) {
        if ((currentClassValue == null) || (currentClassValue === "")) {
            element.className = classToAdd;
        } else {
            element.className += " " + classToAdd;
        }
    }
}
function removeClass(element, classToRemove) {
    var currentClassValue = element.className;
    // removing a class value when there is more than one class value present
    // and the class you want to remove is not the first one
    if (currentClassValue.indexOf(" " + classToRemove) != -1) {
        element.className = element.className.replace(" " + classToRemove, "");
        return;
    }
    // removing the first class value when there is more than one class
    // value present
    if (currentClassValue.indexOf(classToRemove + " ") != -1) {
        element.className = element.className.replace(classToRemove + " ", "");
        return;
    }
    // removing the first class value when there is only one class value 
    // present
    if (currentClassValue.indexOf(classToRemove) != -1) {
        element.className = element.className.replace(classToRemove, "");
        return;
    }
}

添加类和删除类信用

尝试像这样使用 css

<style type="text/css">
    span.First span.Last 
    {
        background-color: #BBBBBB;
    }
    a:visited span.First span.Last 
    {
        background-color: #4cff00;
    }
</style>
<a href="#">
    <span class="First">
        <span class="Last">blabla
        </span>
    </span>
</a>

尝试使用 javascript getElementByTagName（） 方法：

 window.onload=function(){
   var square=document.getElementsByClassName("square")[0];
   var x = square.getElementsByTagName("span");
   for (var i=0; i<x.length; i++){
      x[i].onclick=function(){
         this.style.backgroundColor="red";
      }
   }
 };

这是一个演示小提琴。

相关文章：