jquery操作css属性

这里主要说一下,在写nodebb插件的时候,遇到的有关css属性操作的问题。

W3School上面是这个样子的

  • $(selector).css(name,value)
$("p").css("color","red");
  • $(selector).css(name,function(index,value))
$("p").css("color",function(){return "red";})
  • $(selector).css({property:value, property:value, ...})
$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

使用attr
attr(name) 取得第一个匹配元素的属性值.

$("input").attr("value")

将一个"名/值"形式的对象设置为所有匹配元素的属性

$("input").attr({ value: "txt", title: "text" });

attr(key,value) 为所有匹配的元素设置一个属性值

 $("input").attr("value","txt");

attr(key,fn) 为所有匹配的元素设置一个计算的属性值

$("input").attr("title", function () { return this.value });

removeAttr(name) 从所有匹配的元素中删除一个属性

$("input").removeAttr("value");

使用style

document.getElementById("myDIV").*style*.*display* = "none";

好吧,事实上,我这些都尝试了,最后选用了.css来操作属性。但还是有疑问,为什么.attr就不可以呢?

css("color","red");这样可以用的。但是attr("color","red")好像不可以这样用,attr的作用就是有一些html元素的属性jquery没有去封装,然后你又想用这些属性,就可以用attr,但是jquery都给你封装了css你在用attr("color","")就不产生效果了。

jquery中的css()是用来操纵style{}的,而attr()是加在标签内部的 。所以利用attr()修改的样式会优先css()修改的样式。

你可能感兴趣的:(jquery操作css属性)