JQUERY学习之：CSS操作

最新推荐文章于 2025-11-27 12:57:01 发布

最新推荐文章于 2025-11-27 12:57:01 发布 · 99 阅读

文章标签：

传统 javascript 对 css 的操作相当繁琐，比如 <div id="a" style="background:blue">css</div> 取它的 background 语法是 document.getElementById("a").style.background ，而 jQuery 对 css 更方便的操作， $("#a").background() ， $("#a").background(“red”)
$("#a") 得到 jQuery 对象 [ <div id="a" … /div> ]
$("#a").background() 将取出该对象的 background 样式。
$("#a").background(“red”) 将该对象的 background 样式设为 redjQuery 提供了以下方法，来操作 css
background () background (val) color() color(val) css(name) css(prop)
css(key, value)float() float(val) height() height(val) width() width(val)
left() left(val) overflow() overflow(val) position() position(val) top() top(val)

这里需要讲解一下 css(name) css(prop) css(key, value) ，其他的看名字都知道什么作用了！

< div id ="a" style ="background:blue;color:red"> css </ div >< P id ="b"> test </ P >

css(name) 获取样式名为 name 的样式
$("#a").css("color") 将得到样式中 color 值 red ， ("#a").css("background ") 将得到 blue
css(prop) prop 是一个 hash 对象，用于设置大量的 css 样式
$("#b").css({ color: "red", background: "blue" });
最终效果是 <p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" } ， hash 对象， color 为 key ， "red" 为 value ，
css(key, value) 用于设置一个单独得 css 样式
$("#b").css("color","red"); 最终效果是 <p id="b" style="color:red">test</p>