JQuery操作CSS方法
CSS和attr方法其实很相近,就是换了个名字, 所操作的对象不一样,只要大家不要把他们的用处搞混就好了,下面举个例子说明一下
css(name)
概述
访问第一个匹配元素的样式属性。
参数
nameString要访问的属性名称
实例
描述:取得第一个段落的color样式属性的值。
jQuery 代码:
$("p").css("color");
注意:这里所获取到的是style样式中color中的颜色值,和attr("color")是不一样的。
实例2:
描述:将所有段落的字体颜色设为红色并且背景为蓝色。
jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });
描述:如果属性名包含 "-"的话,必须使用引号:
jQuery 代码:
$("p").css({ "margin-left": "10px", "background-color": "blue" });
实例3:
描述:将所有段落字体设为红色
jQuery 代码:
$("p").css("color","red");
实例4:
描述:逐渐增加div的大小
jQuery 代码:
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
JQuery 操作html方法
html()方法不管是在实战还是调试的时候都是很常用的,举个简单的例子
alert($(id).html());
这样我们可以测式所获取的对象的Hmtl代码是什么,也就确定了所操作的对象。下面下介绍。
html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
实例1:
设置id=obj的内容
HTML代码:
<div id="obj"></div>
JQUERY代码:
$(".obj").html("这是我添加的内容");
结果:
<div id="obj">这是我添加的内容</div>
html()方法其实也可以接受两个参数,html(function(index, html)),index为元素在集合中的索引位置,html为原先的HTML值。
如果您觉得本文的内容对您的学习有所帮助:
关键字:
Jquery入门到精通(基础篇四)