Jquery操作CSS常用方法

1.css
取得p的颜色：
$(document).ready(function(){
var p= $("p").css("color");
alert(p);
});
设置段落字体的颜色为红色：
$(document).ready(function(){
$("p").css("color","red");
});
设置段落字体的颜色为红色并且背景色为蓝色：
$(document).ready(function(){
$("p").css({color:"red",background:"blue"});
});

2.位置
offset() 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
获取p2段落的位置：
$(document).ready(function(){
var p=$("p:last");
p.html( "left: " + p.offset().left + ", top: " + p.offset().top );
});
设置p2段落的位置：
$(document).ready(function(){
$("p:last").offset({top:150,left:20});
});

position()获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。
获取第一段相对第二段的位置偏移：
$(document).ready(function(){
var p=$("p:first");
$("p:last").html("left:"+p.position().left+",top:"+p.position().top);
});
scrollTop()获取匹配元素相对滚动条顶部的偏移
获取第一段相对滚动条顶部的偏移
$(document).ready(function(){
var p=$("p:first");
$("p:last").text("scrollTop:"+p.scrollTop());
});
scrollLeft() 获取匹配元素相对滚动条左侧的偏移。

3.尺寸

height()获取、设置元素高度,width()获取、设置元素的宽度
$(document).ready(function(){
$("p:last").text( "p2高度为："+$("p:last").height());
});
设置p2的高度：
$(document).ready(function(){
$("p:last").height(30);
});

innerHeight()元素内部区域高度（包括补白、不包括边框）。innerWidth（）元素内部区域宽度（包括补白、不包括边框）。
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
});
outerHeight()获取匹配元素外部高度（默认包括补白和边框）。outerWidth()获取匹配元素外部宽度（默认包括补白和边框）。
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() );
});

Jquery操作CSS常用方法相关推荐

jQuery操作CSS常见问题
1.jquery操作css !important无效解决: 这种写法:$('#oDiv').css({"width":"100px", "color ...
【jQuery学习】—jQuery操作CSS和表格
[jQuery学习]-jQuery操作CSS和表格一.jQuery操作CSS 二.jQuery操作表格
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...
jQuery操作css方法
目录一.jQuery可以使用css方法来修改元素样式二.设置类的样式方法 1.添加类 2.移除类 3.切换类三.类操作与className区别四.显示隐藏效果 1.显示语法 2.隐藏语法 3. ...
jQuery操作css样式、属性、动画、节点
css样式操作: 1.设置单个样式: css(name, value) 2.设置多个样式:css(obj) 3.获取样式:css(name) <!DOCTYPE html> <htm ...
jQuery操作CSS
css() 返回或设置元素的一个,或多个样式属性返回CSS属性返回指定的CSS属性的值语法格式 css("propertyname"); 实例 $("p" ...
jquery 操作css 选择器
.addClass() 为每个匹配的元素添加指定的样式类名 .addClass(className) className 为每个匹配元素所有增加的一个或多个样式名 .addClass(function ...
jquery 操作CSS总结
2019-8-8 1. var replyText=$(doc).prev("form").children('div').find(".replyText") ...
【网页制作】jQuery操作css实现设置箭头图片

Jquery操作CSS常用方法

Jquery操作CSS常用方法相关推荐

最新文章

热门文章