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. DSP28335矩阵键盘的检测

    #include "DSP2833x_Device.h"#include "DSP2833x_Examples.h"char temp;void gpio_in ...

  2. IIS8中 出现ashx 401：未授权，uploadify上传文件失败

    环境:阿里云服务器 windows2012  + IIS8 +asp.net 访问IIS 出现能正常访问aspx页面,但是通过ajax访问ashx上传文件的时候就出现ashx  Status Code ...

  3. Ngrok 内网穿透神器(转载)

    mac上配置web服务: http://note.rpsh.net/posts/2013/11/27/osx-10-9-apache-server-php-mysql/ Ngrok 内网穿透神器 由于 ...

  4. 【Binary Tree Inorder Traversal】cpp

    题目: Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary ...

  5. Oracle Client Language Problem

    If you execute SP in the Oracle client and got the error like this: oracle.xdo.XDOException:   oracl ...

  6. AngularJS打印问题

    http://stackoverflow.com/questions/22189544/print-a-div-using-javascript-in-angularjs-single-page-ap ...

  7. 【BZOJ】【3894】文理分科

    网络流/最小割 rausen大爷太神辣-作为一个蒟蒻还是搬运题解吧…… 很明显的一道网络流题.. 首先把所有值的加起来,再减掉网络流最小割值就好了,问题就是如何建图.这貌似也是考了好多次了的... 把 ...

  8. UIResponder

    原网址:http://www.cnblogs.com/kuku/archive/2011/11/12/2246389.html 在 iOS 中,一个 UIResponder 对象表示一个可以接收触摸屏 ...

  9. A beginner’s introduction to Deep Learning

    A beginner’s introduction to Deep Learning I am Samvita from the Business Team of HyperVerge. I join ...

  10. maven mirror repository

    简单点来说,repository就是个仓库.maven里有两种仓库,本地仓库和远程仓库.远程仓库相当于公共的仓库,大家都能看到.本地仓库是你本地的一个山寨版,只有你看的到,主要起缓存作用.当你向仓库请 ...