用javascript编写CSS属性无法正常工作

Question

我正在尝试通过js编写一些CSS属性，并且可以通过以下代码正常工作：

$('.my-class-name').css({
  width: '100px'
});   

但是，如果我添加一个带有连字符的属性，例如“ border-right”，则它不起作用，例如：

$('.my-class-name').css({
  width: '100px',
  border-left: '10px #000000 solid'
});   

Answer 1

使用'border-left'或borderLeft。 jQuery网站指出：

  

通常包含连字符的CSS属性需要包含在驼峰中   JavaScript。例如，CSS属性font-size表示为   fontSize在JavaScript中用作属性名称时。但是这个   将CSS属性的名称传递给.css（）时不适用   作为字符串的方法–在这种情况下，使用驼峰式或连字符式   表格将起作用。

$('.my-class-name').css({
  width: '100px',
  'border-left': '10px #000000 solid'
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-class-name">div</div>

OR

$('.my-class-name').css({
  width: '100px',
  borderLeft: '10px #000000 solid'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-class-name">div</div>