jquery - 当我对迭代元素执行 .css() 时，$("span").each() 不起作用

Question

我有一个代码，我在其中迭代元素，我想获得每个元素的 css 样式。我得到这个错误指的是.each：

Uncaught TypeError: Cannot read property 'replace' of undefined

这是示例代码：

  $("span").each(function(i,v){
   test($(this));
 })

 function test(element){
  console.log(element.css());  //not working
  console.log($(element).css()); //not working either
 }

Answer 1

.css 需要一个参数：要么传递一个参数，一个属性名称，以检索其值，要么传递两个参数，一个属性名称和将其设置为的值：

$("span").each(function(i, v) {
  test($(this));
})

function test(element) {
  console.log(element.css('color'));
}


$("span").each(function(i, v) {
  test2($(this));
})

function test2(element) {
  element.css('color', 'yellow')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="color: green">text</span>

$("span").each(function(i, v) {
  test($(this));
})

function test(element) {
  console.log(element.css()); //not working
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span></span>

如果你不传递任何参数，jQuery 会抛出一个错误，因为它期望第一个参数是一个字符串。

如果你想使用所有属性访问底层 CSSStyleDeclaration，请使用 vanilla DOM 方法而不是 jQuery：

$("span").each(function(i, v) {
  console.log(this.style);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="color: green">text</span>