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

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

相关文章
|
3月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
50 6
|
4月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
41 0
|
21天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
59 21
|
17天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
24 2
|
17天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
23天前
|
JavaScript
jQuery和CSS3精美翻页式电子时钟特效
jQuery和CSS3精美翻页式电子时钟特效
|
24天前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
2月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
26 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
2月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
39 2
|
2月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
77 1

热门文章

最新文章