jquery .css("border-color") 不返回任何内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9915966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery .css("border-color") does not return anything
提问by toom
I wrote the following jquery javascript stuff
我写了以下 jquery javascript 的东西
$(document).mousemove(function(event) {
var element = event.target;
$(element).css("border","black solid 1px");
});
$(document).mouseout(function(event) {
var element = event.target;
console.log( "1 = "$(element).css("border-color") )
$(element).css("border","0px");
console.log( "2 = " + $(element).css("border-color") )
});
It basicly draws a frame around a hovered element. When running this in chrome the output of console.log( "1 = "$(element).css("border-color") )is "" i.e. nothing. The same is true for console.log( "2 = "$(element).css("border-color") ). But I'd expect black. I also tried borderColorwhich does not work either.
它基本上围绕悬停的元素绘制一个框架。在 chrome 中运行它时，输出console.log( "1 = "$(element).css("border-color") )是“”，即什么都没有。对于 也是如此console.log( "2 = "$(element).css("border-color") )。但我希望黑色。我也试过borderColor哪个也不起作用。
Anyway when hovering an element a frame is drawn around this element as I would expect. Why then does the output give nothing in return?
无论如何，当悬停一个元素时，会按照我的预期在该元素周围绘制一个框架。为什么输出没有任何回报？
回答by Mike Depies
You cannot use shorthand for jquery. You have to be more specific, e.g. "border-top-color"
您不能对 jquery 使用简写。你必须更具体，例如“border-top-color”
Let me know if that works.
让我知道这是否有效。
回答by simon
Use jQuery(...).css(“borderTopColor”)
使用jQuery(...).css(“borderTopColor”)
This works: http://jsfiddle.net/JvTwp/
回答by Prabir Choudhhury
$("#mytext").focus(function () {
$(this).css({'background-color': '#FFFFCC'});
$(this).css("border", "black solid 1px");
}).blur(function () {
$(this).css({'background-color': '#fff'});
$(this).css("border", "#DCDCDC solid 1px");
});
<input type="text" id="mytext">
Try this
尝试这个
回答by dvd
With the help of an inspector you can verify that doesn't exists a property named 'border-color', you are looking for 'border-[top|bottom|left|right]-color'
在检查员的帮助下，您可以验证不存在名为“border-color”的属性，您正在寻找“border-[top|bottom|left|right]-color”
回答by Gary
As long as you set the color with JavaScript/jQuery (as in I don't think it'll work if it was only set in CSS). I haven't figured out how to access these properties via jQuery, but you can still access the border properties using native JavaScript.
只要您使用 JavaScript/jQuery 设置颜色（因为我认为如果仅在 CSS 中设置它就行不通）。我还没有弄清楚如何通过 jQuery 访问这些属性，但您仍然可以使用本机 JavaScript 访问边框属性。
console.log(this.style.borderTop); // should return '1px solid rgb(0, 0, 0)'
console.log(this.style.borderColor); // should return 'rgb(0, 0, 0)'
Note:.border(Top|Right|Bottom|Left) seems pretty reliable, but.border(Style|Color|Width) yields mixed results.
注：.border（Top| Right| Bottom| Left）似乎很可靠，但.border（Style| Color| Width）产生不同的结果。
I think it depends if the shorthand sides are identical; e.g:
我认为这取决于速记边是否相同；例如：
- All sides the identicle
- top and bottom (with each other) / left and right (with each other)
- top / left and right (with each other) / bottom
- All four being set differently doesn't appear to work
- I've yet to have success with just
element.style.borderwhole border set at once (i.e.element.style.border = '1px solid #000')
- 四面八方
- 上下（相互）/左右（相互）
- 顶部/左右（相互）/底部
- 所有四个设置不同似乎不起作用
- 我还没有
element.style.border一次成功设置整个边界（即element.style.border = '1px solid #000'）
回答by Chavez Harris
That's because you do not have a border to begin with, according to the snippet of code you posted, you are only creating the border with jQuery... according to events. A better way would be to define a border for the element within your .css file and then use jQuery to change the border as needed...
那是因为你没有边框，根据你发布的代码片段，你只是用 jQuery 创建边框......根据事件。更好的方法是在 .css 文件中为元素定义边框，然后使用 jQuery 根据需要更改边框...
if you do not wish to define a border for the element in your .css file see the below snippet:
如果您不想为 .css 文件中的元素定义边框，请参阅以下代码段：
note that .css("border-color") is not valid, use camel-Case instead. For example:
请注意 .css("border-color") 无效，请改用驼峰式大小写。例如：
$("element").css("borderColor", "1px solid black");
