jQuery从入门到精通之CSS操作-职坐标

jQuery从入门到精通之CSS操作

沉沙 2018-07-24 来源：阅读 1242 评论 0

摘要：本篇jQuery教程探讨了CSS操作的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

jQuery操作CSS样式

· css(name|pro|[,val|fn])方法

o 用于设置或获取元素CSS样式

o 格式1:DOM元素.css("样式名称", "值");

o 格式2:DOM元素.css({"样式名称1":"值1","样式名称2":"值2"});

$(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>

<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>

$(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">

height([val|fn])方法

o 设置或获取元素宽度(相当于获取height属性值)

o 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)

innerHeight()/innerWidth()

o 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)

outerHeight/outerWidth()

o 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)

jQuery操作元素位置

· offset([coordinates])

o 获取或设置元素相对窗口的偏移位

$(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)的父级元素的距离

$(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>

<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>

$(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>

<br>