2012-03-28 46 views
11

我寫了下面的jQuery JavaScript的東西的jQuery的.css(「邊框顏色」)不返回任何

$(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")) 
}); 

它basicly周圍繪製一個懸停元素的幀。當在鉻中運行這個時,console.log("1 = "$(element).css("border-color"))的輸出是「」,即沒有任何結果。 console.log("2 = "$(element).css("border-color"))也是如此。但我期望黑色。我也試過borderColor,這也不起作用。

無論如何,當懸停一個元素時,我會期望在這個元素周圍繪製一個框架。那麼,爲什麼輸出沒有任何回報?

+0

此MA你是無關的,但你有一個語法錯誤。它應該是'console.log(「1 =」+ $(element).css(「border-color」);'。不要忘記那些分號! – 2012-04-06 23:59:49

回答

18

你不能使用簡寫的jquery。你必須更具體,例如「border-top-color」

讓我知道這是否有效。

+2

這將不起作用,您需要指定屬性名稱爲CamelCase – simon 2012-03-28 21:49:59

+7

@semyon:jQuery會將'border-top-color'轉換爲'borderTopColor'。所以,要麼工作.. – thirtydot 2012-03-28 22:56:59

+0

@semyon我只是保持解決方案符合他的問題。 jquery和任何一個都很好。 – 2012-03-29 01:23:44

3

檢查員的幫助下,你可以驗證不存在財產名爲 '邊框顏色',你正在尋找 'border- [頂部|底部|左|右] - 彩'

+0

是的,不要忘記使用CamelCased名字,不要使用連字符 – simon 2012-03-28 21:51:21

7
$("#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"> 

試試這個

http://jsfiddle.net/prabirchoudhury/kcnT8/

0

只要你設置使用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)' 

注:
.borderTop | Right | Bottom | Left)似乎很可靠,但
.borderStyle | Color | Width)產生不同的結果。

我認爲這取決於速記方面是否相同;例如:

  • 所有側identicle
  • 頂部和底部(彼此)/左和右(彼此)
  • 頂部/左和右(彼此)/底部
  • 所有四種設定不同不會出現工作
  • 我還沒有與剛剛element.style.border整個邊界組成功一次(即element.style.border = '1px solid #000'