jq第三天(位置)
css(name|pro|[,val|fn])
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css(
"color","red"
);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".ns").css(
{ color:"red",background:"#2e6da4",width:"100px",height:"50px",}
//{color:"red",backgroundColor:"#2e6da4",width:"100px",height:"50px",}
//CSS中background-color使用-连接符的在css()里面首字母大写
);
});
});
</script>
位置
offset([coordinates])
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
/* $("p").offset(function(n,c){
newPos=new Object();
newPos.left=c.left+100;
newPos.top=c.top+100;alert(n);alert(c);alert(newPos.top); 关于js面向对象http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html
return newPos;
});*/
$(".ns").offset({left:100})
alert($(".ns").offset().top)
});
});
</script>
position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。
offset()始终返回相对于浏览器文档的距离,它会忽略外层元素。
下边看个简单的例子,这里外层的div元素(position:relative)仅一个:
<script type="text/javascript">
$(document).ready(function(){
var vposition = $("#inner").position();
alert(vposition.left); //输出:1
alert(vposition.top); //输出:2
var voffset = $("#inner").offset();
alert(voffset.left); //输出:$("#outer").offset().left+1=9
alert(voffset.top); //输出:$("#outer").offset().top+2=10
});
</script>
<style type="text/css">
.nss{background-color: rgba(46, 80, 135, 0.13);width:100px; height:50px;}
</style>
<div id="outer" style="position:relative;left:0px;top:0px;background-color: #a2ff35;width:100px; height:50px;">
<div id="inner" style="position:absolute;left:1px;top:2px;background-color: green;width:100px; height:50px;">
</div>
</div>
scrollTop([val])
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
scrollLeft([val])
获取匹配元素相对滚动条左侧的偏移。
此方法对可见和隐藏元素均有效。
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("div").scrollTop(100);
});
$(".btn2").click(function(){
alert($("div").scrollTop());
});
$(".btn3").click(function(){
$("div").scrollLeft(100);
});
$(".btn4").click(function(){
alert($("div").scrollLeft());
});
});
</script>
<style type="text/css">
.nss{background-color: rgba(46, 80, 135, 0.13);width:100px; height:50px;}
</style>
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
<br />
<button class="btn3">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn4">获得 scroll top offset</button>