Question

我想找到一个具有以下颜色的div：#ff8533。

是否可以使用Jquery按颜色找到div？

如果找到，是否可以检索其中包含的任何文本？

Answer 1

这是通过计算样式得到元素颜色值的方法：

$(selector).css('color');

但是，即使颜色设置为RGB值，上述内容也会返回hex值。因此，您需要一个函数将RGB转换为hex。

因此，底线是，过滤div元素以返回与指定颜色匹配的元素，将其存储在变量中，然后对该变量执行任何操作，例如，获取包含文本等。看一下下面的例子。

仅在主流浏览器和IE9 +上测试

var matchedDiv = $("div").filter(function() {
    return rgb2hex($(this).css("color")) === "#ff8533"
});

alert (matchedDiv.css('border', '1px solid black').text());

//Credit: http://stackoverflow.com/a/3971432/572827
function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color: red;">Demo2</div>
<div class="demo" style="color: #ff8533;">The one I am after</div>
<div style="color: green;">Demo3</div>

Answer 2

使用javascript：您可以创建一个循环来检查所有div，并使用以下代码检查颜色参数值：

var listDivs = document.body.getElementsByTagName("*");
for (i = 0; i<listDivs.length; i++){
    div=listDivs[i];
    if(window.getComputedStyle(div).getPropertyValue('color')=='#ff8533'){
        text = div.textContent; // use innerHTML if you want the HTML
    }
}

Answer 3

有两种方法可以通过它的颜色找到div，这取决于颜色的设置方式。如果它是由如下属性设置的：

<div bgcolor="red">Hello World</div>

然后你可以简单地在jQuery中访问该元素的属性，如下所示：

$('div[bgcolor="red"]');

通过css或style定义时：

<div style="background-color: red">Hello World</div>

然后，您需要filter您正在查看的元素并找到所需颜色的项目，例如red将为rgb(255, 0, 0)。那看起来像是：

$('div').filter(function() {
    return $(this).css('background-color') == 'rgb(255, 0, 0)'; // red
});

要按文字查找元素，您只需使用:contains()选择器。

Here is an example

Answer 4

使用javascript，您可以找到所有div标签并检查颜色属性

/*
 * this method take element you want to find
 * and color to match
 */
function getElementByColor(element,color)
{
    var elem = document.getElementsByTagName(element);
    var ret = null;
    for(var i=0; i<elem.length; ++i)
    {
        if(elem[i].style.color == color)
        {
            ret = elem[i].innerHTML;
            /*
             * or`enter code here`
             *  ret[txt] = elem[i].textContent;
             */
        }
    }

    return ret;
}
window.onload = function()
{
    if(txt = getElementByColor("div","#ff8533"))
    {
        // do something
    }
};

按颜色查找div

4 个答案:

使用javascript，您可以找到所有div标签并检查颜色属性