Question

我的html标题使用css为红色。我想测试css是否应用于该标题，并在使用jQuery应用消息时提醒消息。

她是我的代码。

<html>
<head>  
    <script src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
    <script>    
        $(document).ready(function() {
            $('#validate_btn').click(function() {
                $('.style').each(function() {
                    if($(this).css('color') == 'red') {
                        alert("css applied");
                    }
                }); 
            }); 
        });
    </script>
    <style>
    .style {
        color: red;
    } 
    </style>
</head>
<body>
    <h1 class="style">Heading One</h1><br><br>
    <div class="myClass">
        <span class="cos_validate_button" id="mybtn">
            <button  id="validate_btn">Check</button>
        </span>
    </div>
</body>
</html>

Answer 1

获取将以此形式返回的样式rgb（x，x，x）然后将其转换为十六进制并检查

DEMO：http://jsfiddle.net/bP7sP/

$(document).ready(function () {
    $('#validate_btn').click(function () {
        if(rgbToHex($('.style').css('color')) == "#ff0000"){
            alert("RED");
        }
    });

    var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 
    function rgbToHex(rgb) {
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    }
    function hex(x) {
        return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
    }
});

Answer 2

当.css返回颜色时，它会将其作为RGB值返回，而不是颜色的名称。

要确保匹配正确的模式，请先执行此操作以获取RGB值：

 $('style').each(function(){
    alert($(this).css('color'));
 });

然后在if语句中使用该值。

Answer 3

为什么所有这些复杂的代码？

让它更容易：

<html>
<head>  
    <script src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
    <style>
        .style { color: red }
    </style>
</head>
<body>
    <h1 class="style">Heading One</h1><br><br>
    <div class="myClass">
        <span class="cos_validate_button" id="mybtn">
            <button  id="validate_btn">Check</button>
        </span>
    </div>
    <script>
        $('#validate_btn').click( function() {
            $('.style').eq(0).css('color') == "rgb(255, 0, 0)" && alert('Style applied!');
        });
    </script>
</body>
</html>

Answer 4

我建议这样的事情：http://jsfiddle.net/9S6fS/

<h1 class="redHeader someHeader">Heading One</h1><br><br>
<h1 class="someHeader">Heading Two</h1><br><br>

...

$('.someHeader').each(function() {
    if($(this).hasClass('redHeader')) {
        alert("css applied to " + $(this).text());
    }
});

最好使用类名来解释该类的用途。它将使您的代码更具可读性。通过为所有标题提供类（someHeader）和红色标题类（redHeader），您可以显着简化问题并使代码更容易扩展。

例如，如果你的redHeader类实际上是一个activeHeader，比如在某些导航控件中，你可能希望将来应用不同的样式（例如：蓝色和粗体文本）。这种方式使用类不会破坏你的javascript。

检查是否使用jQuery应用了css

4 个答案: