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. .NET Async/Await 最佳实践

    .NET 异步编程Guildlines 名称 描述 例外 Avoid async void Prefer async Task methods over async void methods Even ...

  2. 二、IRIG_B解码AC信号

    AC-----过零检测(MAX913ESA)---1khzB码信号(以0v为界大于0为高,小于0为低,的 方波信号) AC-----信号放大(TLE2022ID--mv到5v) ---系统电压转换(M ...

  3. matlab求距一个数最近的奇（偶）数

    int_a = floor(a);minEven = int_a+mod(int_a,2); %最近偶数minOdd = int_a+1-mod(int_a,2); %最近奇数

  4. 防止被dylib hook的小技巧

    在Build Settings中找到“Other Linker Flags”在其中加上”-Wl,-sectcreate,__RESTRICT,__restrict,/dev/null”即可.

  5. 大作业NABC分析结果

    大作业NABC分析结果 这次的大作业计划制作一款关于七巧板的游戏软件.关于编写的APP的NABC需求分析: N:需求 ,本款软件主要面向一些在校的大学生,他们在校空闲时间比较多,而且热衷于一些益智类游 ...

  6. U3D 随笔

    http://unity3d.com/ 资源站 http://docs.unity3d.com/Documentation/ScriptReference/index.html  最新API new ...

  7. 微软Hololens学院教程-Hologram 220-空间声音（Spatial sound ）【本文是老版本，与最新的微软教程有出入】

    这是老版本的教程,为了不耽误大家的时间,请直接看原文,本文仅供参考哦! 原文链接https://developer.microsoft.com/EN-US/WINDOWS/HOLOGRAPHIC/ho ...

  8. WEB实时聊天 comet推技术

    转自:http://www.cnblogs.com/wodemeng/archive/2012/04/06/2435302.html 今天晚上朋友遇到web服务端推技术的问题,自己就查了下资料,学习了 ...

  9. Unity3D中灵活绘制进度条

    有时我们需要在Unity3D中绘制进度条,如:           或        如果使用4.6版本以下的unity绘制环形的进度条可能需要费点劲.我搜到的大多数方法都是用NGUI插件,但有时只是 ...

  10. char a[] = "hello"; char c[] = {'h','e','l','l','o'}; int b[] = {1, 2, 3, 4, 5};的长度区别，及内存中空间开辟情况

    1, char a[] = "hello"; char c[] = {'h','e','l','l','o'}; int b[] = {1, 2, 3, 4, 5}; 数组是开辟一 ...