Question

我是Jquery的新手，请原谅我的无知。我有一个页面，我在页面加载时设置了不同颜色的文本框，要求是对特定颜色进行过滤，即在单击特定复选框时仅显示1种颜色。

我想做的事情：我逐行遍历html表，尝试获取每个文本框的当前颜色，如果颜色匹配，则保留其他文本框颜色不匹配的行。我看过各种帖子，显示如何设置颜色，但不知道如何检索textBox的当前颜色，试过相同的行，但没有运气，请帮忙。

$('input[id$=cbx]').click(function () {
 var v = document.getElementById("<%=TextBox3.ClientID%>");
 // to get the color value of current text box
 var v2 = v.style.background 
 // below also does not work
 var v2 = v.style.background.val()
 // below also does not work
 var v3= v.css('background-color');
 if (v2 == "green")
  {
   $('[id$=user1]').hide();
  }

Answer 1

＆＃39;绿色＆＃39;是rgb（0,128,0）试试这个。

$('input[id$=cbx]').click(function () {
    var v = $('#<%=TextBox3.ClientID').css('background-color');
    if( v== 'rgb(0, 128, 0)') {
        $('[id$=user1]').hide();
    }
});

Answer 2

我认为这个问题的主张是这条线。由于您尚未共享HTML，因此无法理解此元素是否存在style属性。

v.style.background

如果没有样式属性v.style将提供CSSStyleDeclaration，但所有属性都将为空值。

如果在元素中定义了样式属性，如下例

<强> HTML

<input id= "abc" type = "text" class = "red" style = "background:red">

<强> JS

var v = document.getElementById("abc");
var v2 = v.style.background 
console.log(v.style.background); // red

DEMO

将记录red

如果元素上没有定义样式属性，则可以使用getComputedStyle属性来获取值。但在这种情况下，该值将采用rgb格式。

var v = document.getElementById("abc");
var v2 = window.getComputedStyle(v, null);
console.log(v2.background)

DEMO2

Answer 3

您可以使用jQuery获取背景颜色，如下所示

var bgColor = $('#textbox-id-here').css('background-color');

您将获得RGB值。如果要将其转换为十六进制值，可以使用以下函数

function rgb2hex(rgb){
 rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}

修改

假设您有用于保存文本框的表格。然后你可以做这样的事情

$('#table-id tr td input[type=text]').each(function(){ var bg = rgb2hex($(this).css('background-color')); if(bg==='#ff0000'){ $(this).hide(); } });

获取文本框的背景颜色

3 个答案: