为什么jQuery .attr总是说这是未定义的？

Question

Here is my code:

  $("#packing_list_css").on("click", ".crossable", function() {
    if ($(this).attr("text-decoration") == "none")
      $(this).attr("text-decoration", "line-through");
    if ($(this).attr("text-decoration") == "line-through")
      $(this).attr("text-decoration", "none");
  });

I've been testing different things, and anything that I call .attr() on always is undefined. For example, x = $("h1").attr("font-size"); alert(x); x = $("h1").attr("font-size"); alert(x); comes out as undefined.

I have .crossable { text-decoration: none; } .crossable { text-decoration: none; } set in my CSS. When I click inspect element, they all say that text-decoration is set to none. So I don't know why .attr() always says that it's undefined.

What am I doing wrong, and how can I fix it?

Answer 1

.attr() is for HTML attributes, not for CSS properties.

You're looking for .css() :

var cssProp = $(this).css('text-decoration'); // Gets the CSS property's value
$(this).css('text-decoration', 'line-through'); // Sets the CSS property's value

Answer 2

Text decoration isn't an attribute it's a CSS value. Attributes are things like href, class and id on an HTML element.

Try this:

$(this).css("text-decoration", "line-through");