如何使用jQuery获取单击div的CSS？

Question

任何人都可以知道如何使用jQuery获取div的border-color 。

 $("#divcolor").click(function (){ alert("dsf"); var divcolor = $(this).css("border-color"); alert(divcolor); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divcolor" style="border:#333333 solid 1px;" > This is the target </div> 

在divcolor变量中，我没有得到任何东西。

Answer 1

像你一样使用CSS jQuery函数：

http://docs.jquery.com/CSS/css#name

但请阅读本段：

不支持速记CSS属性（例如边距，背景，边框）。 例如，如果要检索渲染边距，请使用：$（elem）.css（'marginTop'）和$（elem）.css（'marginRight'），依此类推。

Answer 2

你的错误在别处。 该代码适用于Chrome和IE。

Answer 3

border-color对我来说也不起作用（在Firefox上），但这有效：

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

http://jsbin.com/ezefu

Answer 4

试试这个：

 $("#divcolor").click(function (){ alert("dsf"); var divcolor = $(this).css("border-color"); alert(divcolor); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divcolor" style="border:1px solid; border-color:#333333;" > This is the target </div> 

Answer 5

$("#divcolor").click(function (){
  var divcolor = $(this).css("borderColor");
  alert(divcolor);
});

Answer 6

我总是认为使用CSS类而不是CSS直接更好的做法。 然后你可以有类似的东西：

$(this).hasClass("MyClassWithTheBorderColorStyleInIt");

Answer 7

你可以写这样的

$("#divcolor").click(function() {
  var divcolor = $(this).css("border");
  divcolor = divcolor.substring((divcolor.indexOf(' ') + 1), divcolor.length);
  divcolor = divcolor.substring((divcolor.indexOf(' ') + 1), divcolor.length);
  alert(divcolor);
});