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()∶

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

相关文章
|
1月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
35 6
|
2月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
31 0
|
2月前
|
前端开发
CSS属性
CSS属性
29 0
|
6天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
9 1
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
27 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
23天前
|
存储 JavaScript 前端开发
jQuery 对属性的操作
【10月更文挑战第8天】
|
26天前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
6天前
|
前端开发
css简写属性
css简写属性
13 0
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
13 2