摘要:本篇jQuery教程探讨了CSS操作的相关内容,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
jQuery操作CSS样式
· css(name|pro|[,val|fn])方法
o 用于设置或获取元素CSS样式
o 格式1:DOM元素.css("样式名称", "值");
o 格式2:DOM元素.css({"样式名称1":"值1","样式名称2":"值2"});
<script>
$(function () {
$("button").click(function () {
// 1.单个样式设置// $("div").css("width", "100px");// $("div").css("height", "100px");// $("div").css("background", "red");
// 2.链式设置样式// $("div").css("width", "100px").css("height", "100px").css("background", "red");
// 3.传入对象一次性设置样式
$("div").css({
"width":"100px",
"height":"100px",
"background":"blue"
});
// 4.获取指定样式的值
console.log($("div").css("width"));
});
});
</script>
jQuery操作元素尺寸
· width([val|fn])方法
o 设置或获取元素宽度(相当于获取width属性值)
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>11-jQuery操作位置和尺寸</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 250px;
height: 250px;
background-color: red;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script src="代码/js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.获取元素宽度(不包括padding和border)// alert($('.son').width());
});
$("button").eq(1).click(function () {
// 2.设置元素宽度(不包括padding和border)// $(".son").width("50px");
});
});
</script></head><body><div class="father">
<div class="son"></div></div><button>获取</button><button>设置</button></body></html>
·
height([val|fn])方法
·
o 设置或获取元素宽度(相当于获取height属性值)
o 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
·
innerHeight()/innerWidth()
·
o 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
·
outerHeight/outerWidth()
·
o 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
jQuery操作元素位置
· offset([coordinates])
o 获取或设置元素相对窗口的偏移位
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.获取距离窗口的偏移位(从border开始)
alert($('.son').offset().left); // 100
});
$("button").eq(1).click(function () {
// 2.设置距离窗口的偏移位
$('.son').offset({left:10, top:10});
});
});
</script>
· position()
o 获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.获取匹配元素相对父元素的偏移
alert($('.son').position().left);// 50
});
$("button").eq(1).click(function () {
// 2.无效,不能设置相对定位元素的偏移位
$('.son').position({left:10, top:10})
});
});
</script>
· scrollTop([val])
o 设置或获取匹配元素相对滚动条顶部的偏移。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>12-jQuery操作位置</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
margin-top: 100px;
margin-left: 100px;
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
</style>
<script src="代码/js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
// 7.获取匹配元素相对滚动条顶部的偏移// alert($('.scroll').scrollTop());// alert($('html').scrollTop());
// 兼容所有浏览器写法
alert($('html').scrollTop()+$('body').scrollTop());
});
$("button").eq(1).click(function () {
// 8.设置匹配元素相对滚动条顶部的偏移// $('.scroll').scrollTop(100);// $('html').scrollTop(100);
// 兼容所有浏览器写法
$('html,body').scrollTop(100);
});
});
</script></head><body><div class="scroll">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<button>获取</button>
<button>设置button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
· scrollLeft([val])
o 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号