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. php判断来源网址地址并且限制非法来源

    $fromHost = array( 'paipai.com', 'localhost', '127.0.0.1' ); $s = 'http://www.paipai.Com/chong/abc.s ...

  2. 【分享】生成带数据的Insert语句工具（源码）

    这个工具用于导出带数据的Insert语句,方便在不同版本的数据库上导出数据.有人说sql server 2008自带导出带数据的Insert语句(连接)但是我的数据库版本没有这个选项,无奈之下自己简单 ...

  3. [转]强悍的跨平台开源多媒体中心XBMC介绍

    [转]强悍的跨平台开源多媒体中心XBMC介绍 http://www.cnblogs.com/mythou/p/3220898.html 最近都在了解Android下的音视频,因为最近需要做一个多媒体中 ...

  4. linux 简单的DMA例程

    一个简单的使用DMA 例子 示例:下面是一个简单的使用DMA进行传输的驱动程序,它是一个假想的设备,只列出DMA相关的部分来说明驱动程序中如何使用DMA的. 函数dad_transfer是设置DMA对 ...

  5. penmount串口触摸屏加载

    static irqreturn_t pm_interrupt(struct serio *serio,  unsigned char data, unsigned int flags){ struc ...

  6. UserDefault 用户首选项读写 swift

    // // ViewController.swift // 首选项数据读写 // // Created by mac on 15/7/12. // Copyright (c) 2015年 fangyu ...

  7. Xcode 添加代码块

    我们经常会定义一些retain的property,而且大概每次我们都会像这样写: @property (nonatomic, retain) Type *name;  每次都要老老实实的把“@prop ...

  8. Android -- 距离感应器控制屏幕灭屏白屏

    权限                                                                                             <u ...

  9. SVN补充

    为什么使用SVN? 1.需求1:备份,以防电脑死机断电等 2.需求2:代码还原,代码不管你改成什么样都可以找到某一段的版本 3.需求3:协同修改,下载修改同一个文件,防止被相互覆盖 4.需求4:多版本 ...

  10. jquery实现select下拉框可输入+联想关联option

    下面代码摘自http://www.oschina.net/question/96791_12832 <script language="javascript" src=&qu ...