Issue with changing borderColor in JQuery

I'm very new to JQuery, in fact th开发者_如何学编程is is the first script I've ever written. The following simply finds all DIVs with class "TestDIV", and then performs a few operations upon inputs found within them.

Everything works apart from the borderColor, which remains the colour I originally set it. Does anybody have any ideas as to why this is? I'd also be very welcome to tips on how to improve my code.

function hideAndShowJQ(show) {
        var hideColor = "#DFDFDF";
        //Find DIVs and modify styling
        var div = $('div.TestDIV'); //Find relevant divs
        div.css('color', (show) ? "" : hideColor) //Change text colour
            .find(':input').attr("disabled", !show) //Disable any inputs
            .attr("borderColor", "red") //Change border colour of inputs
            .attr("value", ""); //Clear any existing input text
}

---

The problem is that borderColor is not an attribute of the element, it's a CSS property.

To change css properties/values use css(). Also, when using quotes it's "border-color" not borderColor (though as @Felix Kling notes, in the comments below, it doesn't matter about the camelCase being in quotes):

div.css('color', (show) ? "" : hideColor) //Change text colour
            .find(':input').attr("disabled", !show) //Disable any inputs
            .css("border-color", "red") //Change border colour of inputs
            .attr("value", ""); //Clear any existing input text

Given that you're using jQuery, and have an input element that you want to clear, it might be easier to use val(), rather than attr():

.val(''); // sets the value of the input to an empty string.

---

This may work too:

    $('#div-name :input').attr("disabled", !show);

because I used the same form for border style of textbox

    $('#div-name :input').attr("style", "");

---

It should be: $(this).css("borderColor","red").

---

You can use the shorthand notation bellow in chrome and safari, but Mozilla don't support it.

$(this).css("borderColor");

So you have to use more specific notation for browsers compatibility. You can use this one instead:

$(this).css("border-top-color");
$(this).css("border-right-color");

etc...

---

You're applying the borderColor variable wrong.

$(this).css("borderColor","red");