如何使用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

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

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

Answer 5

你可以写这样的

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

Answer 6

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

Answer 7

试试这个：

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