前端HTMLJQuery-CSS样式学习（三）
1、访问匹配元素的样式属性：css(name|pro|[,val|fn])
取得第一个段落的color样式属性的值。
$("p").css("color");
将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });
将所有段落字体设为红色
$("p").css("color","red");
逐渐增加div的大小
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
参数详知：
- name：要访问的属性名称
- properties：要设置为样式属性的名/值对
- name,value：属性名,属性值
- name,function(index, value)
- 属性名
- 此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。
2.获取匹配元素在当前浏览器窗口中的位置：offset([coordinates])
3.获取匹配元素相对父元素的偏移：position()
参数详知：
coordinates{top,left}
必需。规定以像素计的 top 和 left 坐标。
•值对，比如 {top:100,left:0}
•带有 top 和 left 属性的对象
function(index,coords)
规定返回被选元素新偏移坐标的函数。
•index - 可选。接受选择器的 index 位置
•oldvalue - 可选。接受选择器的当前坐标
4.取得匹配元素当前计算的高度值（px）：height([val|fn])
5.取得第一个匹配元素当前计算的宽度值（px）：width([val|fn])
参数详知：
- val：设定CSS中 ‘height’
的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。 - function(index, height)：返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 444px;height: 222px; background-color: red;"></div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
$(function() {
$("div").html("<p>我是文本</p>");
$("div").on("click", "p", function() {
$(this).css("background-color","purple")
$("div").append("</br>");
$("div").append("div的宽:"+$("div").width());
$("div").append("</br>");
$("div").append("div的高:"+$("div").height());
console.log($("p").offset());
console.log($("p").position());
});
});
</script>
</body>
</html>
6.获取匹配元素相对滚动条顶部的偏移：scrollTop([val])
参数详知：
val:设定垂直滚动条值
7.获取匹配元素相对滚动条左侧的偏移：scrollLeft([val])
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img {
position: fixed;
left: 1200px;
bottom: 50px;
display: none;
}
body {
height: 5000px;
}
</style>
</head>
<body>
<img src="img/gotop.png" />
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() >= 1000) {
$("img").show();
console.log($(this).scrollTop());
}
else {
$("img").hide();
}
});
$("img").mouseenter(function() {
$(this).attr("src", "img/gotop.gif");
});
$("img").click(function() {
$(Window).scrollTop(0);
});
$("img").mouseleave(function() {
$(this).attr("src", "img/gotop.png");
});
});
</script>
</body>
</html>
8.获取第一个匹配元素内部区域高度（包括补白、不包括边框) :innerHeight()
9.获取第一个匹配元素内部区域宽度（包括补白、不包括边框) :innerWidth()
10.获取第一个匹配元素外部高度（默认包括补白和边框）:outerHeight([options])
11.获取第一个匹配元素外部宽度（默认包括补白和边框）:outerWidth([options])
参数详知：
options：设置为 true 时，计算边距在内。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1" style="width: 250px; height: 250px; border: 1px solid red; background-color: purple;"></div>
<div id="d2" style="width: 250px; height: 250px; border: 10px solid red; background-color: purple;margin-top: 50px;"></div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
$(function() {
$("#d1").text("innerheight:" + $("#d1").innerHeight() + "innerwidth:" + $("#d1").innerWidth());
$("#d2").text("outerHeight:" + $("#d2").outerHeight() + "outerWidth:" + $("#d2").outerWidth(true));
});
</script>
</body>
</html>