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. android-监听网络状态

    1.注册一个广播接收器,监听网络状态private void Start() { IntentFilter filter = new IntentFilter(); filter.addAction( ...

  2. c/c++常用代码--使用libcurl下载文件

    #pragma once #include <stdio.h>#include <stdlib.h> #include <curl/curl.h> #ifdef   ...

  3. Java Day 16

    基本数据类型包装类 Integer.MAX_VALUE  Integer.parseInt(); intValue(); valueOf(); 自动装拆箱 如果是一个字节范围,数据共享 字符串中 数值 ...

  4. Linux C 文件与目录3 文件读写

    文件读写 文件读写是指从文件中读出信息或将信息写入到文件中.Linux文件读取可使用read函数来实现的,文件写入可使用write函数来实现.在进行文件写入的操作时,只是在文件的缓冲区中操作,可能没有 ...

  5. 微软职位内部推荐-Software Engineer II-News

    微软近期Open的职位: News is a critical areas for integration of mobile and services, one of the top priorit ...

  6. 分布式架构--第一篇--项目拆分（maven命令生成多模块项目）

    预览生成的项目结构: ying-yue-parent // 顶级总编译控制模块 ying-yue-lib // jar模块 ying-yue-model // 模型对象模块 ying-yue-dao ...

  7. QT对话框设计

    软件和系统:QTcreator5.7,win8.1 1. 首先新建项目,选择application中的Qt widgets application. 2. 创建类Dialog,选择QDialog作为基 ...

  8. cnblogs体验

    用博客园可以让我更好的关注我们班同学的情况,通过关注他们,浏览他们发布的博客,学习到了很 多,比如不同的设计思想,良好的变成习惯,变量命名,缩进,注释等,而且自己不会的,可以帮助自己 有一些想法,是自 ...

  9. 双系统修改启动项顺序&&&修改开机启动等待时间

    1. 双系统修改启动项顺序 更改/etc/grub.d目录 下的文件名是可行的          默认情况下Windows 7对应的文件名是30_os-prober,第一个linux系统对应的是10- ...

  10. HashCode作用

    作用: 1.HashCode的存在主要是为了查找的快捷性,HashCode是用来在散列存储结构中确定镀锡的存储地址的 2.如果两个对象的equals相等,那么HashCode一定相等,反之不行 3.如 ...