如何使用jquery在选择中获取项目的css属性值答案

【问题标题】：How to obtain css property value of an item in a select using jquery如何使用jquery在选择中获取项目的css属性值
【发布时间】：2014-05-23 00:16:04
【问题描述】：

我正在尝试获取单击列表项的颜色。例如，当颜色为红色时，我想对其施加一些限制。怎么弄啊，没看懂。

if($("#listbox option:selected").css("color")=="red"){
}

我有一个带有一些红色项目的列表框。我想阻止用户选择那些红色项目。

请帮帮我。

【问题讨论】：

可以分享一下html吗？？
取决于您如何设置选项的样式。是内联css吗？
@Aamir Afridi 实际上 css 是使用 jquery 动态附加的。它不在静态代码中。
@edge: 能不能分享下相关代码或链接/
试试jsfiddle.net/aamir/tq9W8/1

标签： jquery

【解决方案1】：

正如皮特建议的那样，使用更好更简单的数据属性：http://jsfiddle.net/aamir/tq9W8/5/

$('#listbox option:eq(0)').css('color', 'red').data('color', 'red');

$('#listbox').change(function () {
    if ($(this).find("option:selected").data('color') == 'red') {
        alert('color is red');
    } else {
        alert('other options');
    }
});

或者你可以试试这个：http://jsfiddle.net/aamir/tq9W8/4/

$('#listbox option:eq(0)').css('color', 'red');

function checkColorByName(ele, colorName) {
    var tempDiv = $('<div>').css("color", colorName).hide().appendTo('body');
    console.log(tempDiv.css('color'));
    var bol = tempDiv.css('color') == ele.css('color');
    tempDiv.remove();
    return bol;
}


$('#listbox').change(function () {
    if (checkColorByName($(this).find("option:selected"), 'red')) {
        alert('color is red');
    } else {
        alert('other options');
    }
});

根据this，你需要使用plugin。

【讨论】：

相关stackoverflow.com/questions/1740700/…

【解决方案2】：

你的代码很好。

如果它不起作用，请执行console.log($("#listbox option:selected").css("color")=="red");

如果显示未定义，则该选项未设置颜色属性，但可能在#listbox 上设置。（试试$("#listbox option:selected").parent().css("color")=="red")）

【讨论】：

他想办法获取选项颜色并与颜色名称进行比较。阅读我的答案以获取详细信息以及问题下的皮特详细信息:)