logo标签列表

选择具有特定背景颜色的元素

jquerycssjquery-selectors
30

我想选择

中一堆具有特定背景颜色的span，我该如何实现？

4个回答
46

如果我理解问题的正确，选择器 [attribute=value] 不起作用，因为<span> 不包含属性 "background-color"。你可以快速测试一下，确认它不会匹配任何内容：

$('#someDiv span[background-color]').size(); // returns 0
给定：
.one, .two {
  background-color: black;
}

.three {
  background-color: red;
}
这是一段能够正常运行的代码： 

$('div#someDiv span').filter(function() {
    var match = 'rgb(0, 0, 0)'; // match background-color: black
    /*
        true = keep this element in our wrapped set
        false = remove this element from our wrapped set
                                                         */
    return ( $(this).css('background-color') == match );

}).css('background-color', 'green'); // change background color of all black spans
.one, .two {
  background-color: black;
}

.three {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<div id="someDiv">
    <span class="one">test one</span>
    <span class="two">test two</span>
    <span class="three">test three</span>
</div>

你如何为元素的ID执行相同的操作？如果在同一页上有5个相同的ID，你将如何匹配它们，分配一个背景，并找到其他匹配的ID来执行相同的操作？ - Tom
@Tom 这有点棘手，因为你不应该有5个id。一个id在该页面上应该是唯一的，而拥有多个id将无法与javascript很好地配合使用（我相信它只会抓取它找到的第一个）。你能否将它们转换为类？ - Owen
它对我起作用了，只有一个小改变。在检查时显示的颜色代码为RGB，但运行代码时#XXXXXX有效。$(document).ready( function () /在DOM准备就绪后运行脚本/ { $('#MyId tr').each(function() { var yellowmatch = '#ffffcc'; var redmatch = '#ffd7d7'; var greenmatch = '#e1ffe1'; if($(this).css('background-color') == redmatch ) { } if($(this).css('background-color') == yellowmatch) { } if($(this).css('background-color') == greenmatch ) { } }); });</script> - Sangeet
@owen 不错的解决方案！css('background-color'); 也可以返回 rgba...var match = 'rgba(0, 0, 0, 0.5)'; //半透明黑色 - Mavelo
2

Javascript方法

  1. 获取所有的span元素
  2. 将span元素节点列表转换为数组
  3. 筛选span元素数组
  4. 改变匹配到的span元素的背景颜色

// Get all spans
let spans = document.querySelectorAll('div#someDiv span'); 

// Convert spans nodeslist to array
spans = Array.from( spans ); 

// Filter spans array
// Get CSS properties object of selected element - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
let arr = spans.filter( span => String( document.defaultView.getComputedStyle( span, null ).backgroundColor ) == 'rgb(0, 0, 0)' );

// Change background color of matched span elements
arr.forEach( span => {
    span.style.backgroundColor = 'green';
});
.one, .two {
  background-color: black;
}

.three {
  background-color: red;
}
<div id="someDiv">
    <span class="one">test one</span>
    <span class="two">test two</span>
    <span class="three">test three</span>
</div>

0
你还在厌烦为选择某样东西而编写流程吗？ 这里是选择任何事物的通用流程。你不需要再为任何地方选择编写另一个流程。试试看，这是一个例子：
<!DOCTYPE html>
<html>
<head>
 <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script>

function ReplaceAll(base,told,tnew) { // replace insensitive
  if (told=="") {return base;}
  var u=base.toLowerCase();
  var t=told.toLowerCase();
  var ss=""; var p=-1; var i=0;
  p=u.indexOf(t);
  if (p>-1) {
    let mLen=told.length;
    while (p>=0) {
      ss+=base.substr(0,p)+tnew;
      i=p+mLen;
      base=base.substr(i);
      u=u.substr(i);
      p=u.indexOf(t);
    }
    ss+=base; //fix bug
    return ss;
  }
  return base;
}

function Len(pS) {return pS.length;}
function Lower(pS) {return pS.toLowerCase();}
function Upper(pS) {return pS.toUpperCase();}
function Trim(pS) {return pS.trim();}
function Sub(pS, p1, p2=0) { 
  if (p2<=0) {p2=Len(pS);}
  if (p1<=0) {p1=0;}
  return pS.substring(p1,p2); 
}
  

function IndexAt(base, t ,pos=0) { //index from position
  if (pos<0) {pos=0;}
  var x=base.substr(pos);
  var p=x.indexOf(t);
  if (p>=0) { return p+pos;} else {return -1;}
}

function NormStyle(pS) {  //normalization style
  pS=Trim(pS);
  if (Len(pS)==0) {
    return pS;
  }
  if (IndexAt(pS,":")>=0) {pS+=";";} // style+";"
  pS=ReplaceAll(pS,';;',';');
  pS=ReplaceAll(pS,' ','');  // without spaces!  -> font-name
  pS=ReplaceAll(pS,',',', ');
  //-- color:#* ->color:rgb(*), because jQuery in runtime replace style: color:#* -> rgb(*), font_size:?em -> ?px .. etc.
  var p1=0; var p2=0;
  var t1=""; var t2="";
  p1=IndexAt(pS,"color:#");
  while (p1>=0) {
   p2=IndexAt(pS,';',p1);
   if (p2>0) {
     t1=Sub(pS,p1,p2); //color:#ff0000
     t2=Sub(t1,6); //#ff0000
     t2=RGB(t2);
     pS=ReplaceAll(pS,t1,"color:"+t2);
   }
   p1=IndexAt(pS,"color:#",p0+2);
  }
  return pS;
}

function RGB(pS) {
  var rgb=pS;
  if (IndexAt(Trim(rgb),"#")==0) {
    rgb=Trim(rgb);
    rgb=rgb.padEnd(7,"0"); //#ff00 -> #ff00000
    var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
    var matches = patt.exec(rgb);
    rgb = "rgb("+parseInt(matches[1], 16)+", "+parseInt(matches[2], 16)+", "  +parseInt(matches[3], 16)+")";
  }
  return rgb;
}

function NQ(pS) { //NQ("alfa 'b`c' x")=="alfa ♣♣♣♣♦ x"
  var bo=false; var mEnd=true; 
  var typ=0;
  var s="";
  for (let i=0; i<Len(pS); i++) {
    switch (pS.charAt(i)) {
     case '"': if (typ==1) {typ=0;} else { if (typ==0) {typ=1;} } break;
     case "'": if (typ==2) {typ=0;} else { if (typ==0) {typ=2;} } break;
     case "`": if (typ==3) {typ=0;} else { if (typ==0) {typ=3;} } break;
    }
    if (typ==0) {
      if (!mEnd) { mEnd=true; s+="♦"} else {s+=pS.charAt(i);} 
    } else {
      s+="♣"; mEnd=false;
    } 
  }
  if (typ>0) {s="Error:♣ Not valid string termination";}
  return s;
}

function Element(pSelector, pFilter="",pNumbers="",pTrace=1) { //pTrace: 0=no trace, 1=console.log, 2=alert trace
  switch (pTrace) {
   case 1: console.log("start trace"); break; 
   case 2: alert("start trace"); break;
  }
  //--- pNumbers ---
  
  pNumbers=Trim(pNumbers);
  var  mNumbers=""
  if (pNumbers>"") { mNumbers = "," + pNumbers + ","; }
  //--- pFilter validation for eval --- // Assignment(=) is not allowed
  pFilter=Trim(pFilter);
  if (pFilter>"") {
    let s=ReplaceAll(pFilter,"===","♠♠♠"); 
    s=ReplaceAll(s,"==","♠♠"); 
    if (IndexAt(s,"=")>0) {
      s=NQ(s);
      if (s=="Error:♣ Not valid string termination") {
        if (pTrace==1) {console.log(s+" pFilter:"+pFilter);} 
        alert(s); 
        return null;
      } else {
        if (IndexAt(s,"=")>0) { 
          let x="Error: Assignment is not allowed (=/==)";
          if (pTrace==1) {console.log(x+", "+s);} 
          alert(x+"\n"+s);
          return null;
        }
      }
    }
  }
  
  var mCnt=0;

  var mObj=$(pSelector).filter(function(){
    var bo=true; 
    var s=""; var t=""; var ss="";
    mCnt++;
    //--- pNumbers --
    if (mNumbers>"") {
      t=","+mCnt+",";
      if (IndexAt(mNumbers,t)<0) { 
        bo=false; 
      }
    }
    //-----RESULT by pNumbers ---
    if (pNumbers>"" && pTrace>0) {
      if ( !bo || (bo && pFilter=="") ) {
        switch (pTrace) {
          case 1: console.log(mCnt+". Result by numbers: "+bo+", numbers:["+pNumbers+"]"); break; 
          case 2: alert(mCnt+". Result by numbers: " +bo+", numbers:["+pNumbers+"]"); break;
        }
      }
    }

    //-------- pFilter ----
    if (bo && pFilter>"") {
      var cPrefix="{:"; var cSufix="}";
      var p1=0; var p2=0; var p3=0;
      var t1=""; var t2=""; var t3=""; var t4=""
      var r1=""; var r2="";
      var lenP=Len(cPrefix); var lenS=Len(cSufix);
      s=pFilter; ss=s;
      p1=IndexAt(s,cPrefix);
       
      while (p1>=0) {
        r1=""; p2=IndexAt(s,cSufix,p1);
        if (p2>=0) {
          t1=Sub(s,p1,p2+1)  //{:css.color} //{:html}
          t2=Sub(t1,lenP); //css.color} //html}
          t2=Sub(t2,0,Len(t2)-lenS); //css.color //html
          t2=Lower(t2);
          p3=IndexAt(t2,".");
          if (p3>0) {
            t3=Sub(t2,0,p3);  //css
            t4=Sub(t2,p3+1);  //color
            r1='$(this).'+t3+'("'+t4+'")';  //$(this).css("color")
            if (t3=='attr' && t4=='style') {
              r1='NormStyle(String($(this).attr("style"))';//exception for attr.style, because jQuery in runtime change attr style
            }
          } else {
            r1='$(this).'+t2+'()';  //html -> $(this).html()      
            if (t2=="data") {r1='JSON.stringify('+r1+')';} //exemption for data -> JSON.stringify( $(this).data() )
          }
        }
        if (t1>"" && r1>"") {s=ReplaceAll(s, t1, r1);}
        //--- evaluate only in trace mode for debug ---
        if (pTrace>0) {  
          r2=eval(r1);
          ss=ReplaceAll(ss,t1,"'"+r2+"'");
        }  
        //---  next iterate --- 
        p1=IndexAt(s,cPrefix,p1+2); 
      } 
      //  --- trace1 ---
      if (ss>"" && pTrace>0) {
        switch (pTrace) { 
          case 1: console.log(mCnt+". "+ss); break; 
          case 2: alert(mCnt+". "+ss); break; 
        }
      }
      //--- evaluate ---
      bo=eval(s);
      // --- trace2 ---
      switch (pTrace) {
        case 1: console.log(mCnt+". FILTER: "+bo+", [:"+s+"]"); break; 
        case 2: alert(mCnt+". FILTER: "+bo+"\n ["+s+"]"); break; 
      }
    }
    //--- RESULT ---
    return bo;
  })

  switch (pTrace) {
    case 1: console.log("end trace"); break; 
    case 2: alert("end trace"); break;
  }
  return mObj;   
}


$(document).ready(function(){
  $("button").click(function(){
    var mObj=Element("body p a",
                     "{:css.color}==RGB('#ff00') && {:css.font-size}=='16px' && 'href='+{:attr.href} > '' ",
                     "2,3"
                    );
    if (!$.isEmptyObject(mObj)) {mObj.hide();}  // or mObj.css('display','none')
  /* 
    // --- hidden element only from selector ":hidden"
    mObj=Element('a:hidden');
    if (!$.isEmptyObject(mObj)) {mObj.show();}
  */
  
  /*
   //css.
    {:css.color} -> $(this).css("color")
    {:css.font-size} -> $(this).css("font-size")
    {:css.display}-> $(this).css("display")
   //attr.
    {:attr.href} -> $(this).attr("href")+"]"+
  * {:attr.style} -> NormStyle(String($(this).attr("style"))
    {:attr.id} -> $(this).attr("id")
    {attr.class -> $(this).attr("class")
   //spec
    {:html} -> $(this).html()
    {:index} -> $(this).index()
  * {:data} -> JSON.stringify($(this).data())
    {val} -> $(this).val()) // for value //or prop.value
   //prop    
    {:prop.checked} -> $(this).prop("checked")
    {:prop.selected} -> $(this).prop("selected")
    {:prop.selectedIndex} -> $(this).prop("selectedIndex")
    {:prop.disabled} -> $(this).prop("disabled")
   //comment 
    prop() for:  
      disabled,checked,selected,value,selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked 
    val() for value 
  */

  });
});
      
</script>
</head>
<body>

<h2>jQuery.Element() for filtering "any"</h2>
<p>
  <a id="1" href="?m=1" style="color:#ff0000;font-size:16px;" class="alpha" data-x="123" data-y="123">1. ALPHA</a>
  , <a id="2" style="color:#ff0000;font-size:16px;">2. BETA </a>
  , <a id="3" href="?m=3" style="font-size:16px;">3. GAMMA</a>
</p>
<a id="4" href="?m=4" style="font-size:14px;">END</a>
<button>Click me</button>

</body>
</html>
function Element(pSelector, pFilter="", pNumbers="", pTrace=1) // pTrace: 0表示不追踪，1表示console.log，2表示alert追踪 - Jan Tungli
-7
使用属性选择器 [attribute=value] 查找特定的属性值。
#id_of_the_div span[background-color=rgb(255,255,255)]
3
不行，因为background-color是CSS属性而不是HTML属性。 - Alp
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接