jQuery_CSS 属性上|学习笔记

简介: 快速学习 jQuery_CSS 属性上

开发者学堂课程【jQuery 开发教程:jQuery_CSS 属性上】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4297


jQuery_CSS 属性上


目录

一、Css()

二、height()

三、width()

四、innerHeight()

五、innerWidth()

六、offset()

七、outerHeight( )

八、outerWidth()

九、position()

十、scrollLeft()

十一、scrolTop()

 

一、Css():

获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS 属性。

示例:

创建 html 文件 domcss.html

<! DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8"><title></title>

<script src="jquery-2.2.1.min.js"></script></head>

<body>

<div>我是一个div</div><script>

$ ( function()i

$ ("div").css( "color" , "red");})

< /script>< / body>< /html>


二、height():

获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。

示例:

<style>

Div{

width: 100px;height: 200px ;

}

< / style></head>

<body>

<div>我是一个div</ div><script>

$( function(){

var div=$ ( "div" );

var cssobj={color: "red" , "background-color" : "green"3;$ ("div" ).css ( cssobj);

console.log(s ("div" ).css ( "color") ) ;

console.log(div.height() ) ;

})

< /script>< / body>

 

三、width() :

为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS 宽度。

 

四、innerHeight() :

为匹配的元素集合中获取第一个元素的当前计算高度值包括 padding,但是不包括border.

 

五、innerWidth() :

为匹配的元素集合中获取第一个元素的当前计算宽度值,包括 padding 但是不包括border.

 

六、offset() :

在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。设置匹配的元素集合中每一个元素的坐标 ,坐标相对于文档。


七、outerHeight( ):

获取元素集合中第一个元素的当前计算高度值,包括 padding ,border 和选择性的margin。返回个整数(不

包含"px" )表示的值或如果在一个空集合 上调用该方法,则会返回 null。

 

八、outerWidth():

获取元素集合中第一个元素的当前计算宽度值,包括 padding,border 和选择性的margin。(注:返回一个整数(不包含“px”)表示的值,或如果在一个空集合上调用该方法,则会返回 null.)

<! DOCTYPE html >

<html lang ="en”>

<head>

<meta charset ="UTF-8">

<title></title>

<script src=" jquery-2.2.1.min.js"></script>

<style>

div {

width:100px;

height:200px;

padding:100px;

margin:100px;

border:2px solid green;

</style>

<head>

<body>

<div>我是一个div</div>

<script>

$(function () {

Var div=$(“div”);

$(“div”).css (“color ”, “ red”)

$(“div”).css (“color”);

(console一下)

(console.log($(“div”).css(“color”))

Console .log ( div .height());

Console .log ( div .width());[可以接受参数]

//Console .log ( div .innerheight());

//Console .log ( div .innerwidth());[不可以接收参数]

})

</script>

 

九、position()∶

获取匹配元素中第一个元素的当前坐标,相对于 offset parent 的坐标。(译者注: offset parent 指离该元素最近的而且被定位过的祖先元素)

 

十、scrollLeft():

获取匹配的元素集合中第一个元素的当前水平滚动条的位置。设置每个匹配元素的水平滚动条位置。

 

十一、scrolTop()∶

获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。设置每个匹配元素的垂直滚动备位置

相关文章
|
20天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
18 7
|
1月前
|
前端开发 容器
CSS语言的属性(Property)和值(Value)
CSS语言的属性(Property)和值(Value)
|
3月前
|
前端开发
CSS常用属性理解
CSS常用属性理解
28 0
|
6天前
|
前端开发 UED
CSS cursor的一些相关属性
CSS cursor的一些相关属性
|
10天前
|
前端开发
css属性是什么
【4月更文挑战第15天】css属性是什么
13 3
N..
|
30天前
|
前端开发 容器
CSS基本属性
CSS基本属性
N..
10 0
|
1月前
|
前端开发 容器
CSS背景background八种属性
CSS背景background八种属性
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
17 0
|
1月前
|
JavaScript
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
20 2
|
1月前
|
移动开发 JavaScript 前端开发
编程笔记 html5&css&js 028 HTML输入属性(2/2)
编程笔记 html5&css&js 028 HTML输入属性(2/2)