CSS方法

jQuery不但提供了CSS的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的CSS操作方法，我们分别来了解一下。

width()方法

方法名 描述
width() 获取某个元素的长度
width(value) 设置某个元素的长度
width(function(index,width) {}) 通过匿名函数设置某个元素的长度

html代码(部分)如下：

<div style="background: #eee; width: 800px;">

    <strong>www.ycku.com</strong>

</div>

jQuery代码如下：

通过typeof可以看到变量的具体数据类型是什么。

alert(typeof $("div").css("width")); //string

alert(typeof parseInt($("div").css("width"))); //number

alert(typeof $("div").width()); //获取元素的长度，返回的类型为number

alert($("div").width()); //8

alert($(window).width()); //

alert($(document).width()); //
$("div").width(500); //设置元素长度，直接传数值，默认加px

$("div").width("500px"); //同上

$("div").width("500pt"); //同上，设置了pt单位
$("div").width(function(index, width) {  //index是索引，width是原本值

    return width - 500 + "px"; //虽然可以不加(单位)，会智能添加，但还是建议加上单位，更加清晰

});

height()方法

方法名 描述
height() 获取某个元素的高度
height(value) 设置某个元素的高度
height(function(index,height) {}) 通过匿名函数设置某个元素的高度

此方法与width()类似，在此不赘述。

内外边距和边框尺寸方法

方法名 描述
innerWidth() 获取元素宽度，包含内边距padding
innerHeight() 获取元素高度，包含内边距padding
outerWidth() 获取元素宽度，包含边框border和内边距padding
outerHeight() 获取元素高度，包含border和内边距padding
outerWidth(true) 同上，且包含外边距
outerHeight(true) 同上，且包含外边距

有html代码如下：

<div style="background: #eee; width: 200px; height: 200px; padding: 200px; border: 100px solid red; margin: 100px;">

    <strong>www.ycku.com</strong>

</div>
alert($("div").width()); //不包含 200

alert($("div").innerWidth()); //包含内边距padding 600

alert($("div").outerWidth()); //包含内边距padding+边框border 800

alert($("div").outerWidth(true)); //包含内边距padding+边框border+外边距margin 1000

元素偏移方法

方法名 描述
offset() 获取某个元素相对于视口的偏移位置
position() 获取某个元素相对于父元素的偏移位置
scrollTop() 获取垂直滚动条的值
scrollTop(value) 设置垂直滚动条的值
scrollLeft() 获取水平滚动条的值
scrollLeft(value) 设置水平滚动条的值

html(部分代码如下)：

<div title="bbb">

    <strong>www.ycku.com</strong>

</div>

jQuery代码如下：

alert($("div").offset().left); //相对于视口(我觉得是window)的偏移 8

alert($("div").offset().top); //相对于视口(我觉得是window)的偏移 8

alert($("strong").offset().top); //同上 8

再看html代码：

<div title="aaa" style="position: relative;">

    <strong style="position: absolute; top: 1px;">www.ycku.com</strong>

</div>

jQuery代码如下：

alert($("div").position().top); //相对于父元素的偏移 8

alert($("strong").offset().top);//相对于视口的偏移 9

alert($("strong").position().top); //相对于父元素的偏移 1

再看html代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>基础DOM和CSS操作</title>

    <script type="text/javascript" src="jquery-1.12.3.js"></script>

    <script type="text/javascript" src="demo.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

</body>

</html>

jQuery代如下：

$(window).scrollTop(400); //设置当前滚动条的位置

alert($(window).scrollTop()); //获取当前滚动条的位置

基础DOM和CSS操作(三)的更多相关文章

  1. 基础DOM和CSS操作(二)

    元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...

  2. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  3. 基础DOM和CSS操作(一)

    DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...

  4. jQuery基础DOM和CSS操作

    $('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...

  5. Jquery5 基础 DOM 和 CSS 操作

    学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 DOM 是一种文档对象模型.方便开发者对HTML 结构元素内容进行展示和修改.在 JavaScr ...

  6. jQuery(基础dom及css操作)

    设置元素内容 元素属性操作 ---------- 元素样式操作 ---------------- 对象数组的遍历 测试代码: $(function () { var v=$('div').css([' ...

  7. jQuery的基础dom和css操作

    1.元素以及内容操作 $(function () { // alert($("a").html()); // 获取元素中间的html内容,包括标签和文本内容 // alert($( ...

  8. 第 5 章 基础 DOM 和 CSS 操作

    在常规的 DOM 元素中,我们可以使用 html()和 text()方法获取内部的数据.html()方法 可以获取或设置 html 内容,text()可以获取或设置文本内容. $('#box').ht ...

  9. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

随机推荐

  1. acdream 1738 世风日下的哗啦啦族I

    原题链接:http://acdream.info/problem?pid=1738 树套树裸题,如下: #include<algorithm> #include<iostream&g ...

  2. 使用ImageLoader实现图片异步加载

    注:下面使用的是包:1.8.4,其他版本包的,DisplayImageOptions defaultOptions和 ImageLoaderConfiguration config2配置不一样,请看官 ...

  3. 微软云平台媒体服务实践系列 1- 使用静态封装为iOS, Android 设备实现点播（VoD）方案

    微软的云平台媒体服务为流媒体服务提供了多种选择,在使用流媒体服务为企业做流媒体方案时,首先需要确认要流媒体接收目标,如针对广大iOS, Android移动设备,由于它们都支持HLS 格式的流媒体,基于 ...

  4. 横屏下的ImagePickerController

    Try this way.... As per Apple Document, ImagePicker Controller never Rotate in Landscape mode. You h ...

  5. [转]论window和Linux之长短

    论window和Linux之长短 王垠 http://www.kerneltravel.net/jiqiao/whyLinux.htm — 摈弃 Windows 低效率的工作方式,发掘 Linux 身 ...

  6. How to Notify Command to evaluate in mvvmlight

    How to Raize Command to evalituate in mvvm In mvvmlight, we bind our control to the relaycommand obj ...

  7. VIM实用基本操作技巧

    文本编辑器有很多,图形模式下有gedit.kwrite等编辑器,文本模式下的编辑器有vi.vim(vi的增强版本)和nano.vi和vim是Linux系统中最常用的编辑器.有人曾这样的说过在世界上有三 ...

  8. My mac cannot run 类相关的操作 , which is lower than 类相关的操作。

     首先你选择的项目是mac项目,    其次,你MAC的系统版本小于你当前项目部署环境的最低支持版本    要么升级你的MAC系统,要么再project—>target设置developerme ...

  9. [shell练习]——awk练习题

    1. sed和awk有什么区别? (1)awk:按列(域)操作:sed:按行操作(2)awk:文本处理语言,适合对文本进行抽取处理:sed:非交互式的编辑器,适合对文本进行编辑 2. awk要处理域的 ...

  10. typedef和自定义结构体类型

    在自定义结构体类型时会用到typedef关键字.大家都知道typedef是取别名的意思,在C语言中跟它容易混淆的有const,#define等,其区别不在本篇文章讨论之列. /*定义单链表结点类型*/ ...