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

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

相关文章
|
2天前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
10天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
14天前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
44 14
|
15天前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery - 获取内容和属性
46 12
|
11天前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
19 5
|
11天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
9 1
|
1月前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果,包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如,使用`blur(10px)`可使图像产生模糊效果,包裹层设置`overflow: hidden`可避免边缘模糊;`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度;`grayscale(1)`将图像转为灰度;`invert(1)`实现图像颜色完全反转;`opacity(0.5)`调整图像半透明;`saturate(350%)`增加饱和度;`sepia(100%)`营造复古深褐色调;`hue-rotate(180deg)`改变
28 4
CSS常用滤镜属性讲解
|
1月前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
30 2
了解 css中 backface-visibility 属性
|
23天前
|
前端开发 算法 开发者
CSS 的了解text-rendering属性
【8月更文挑战第24天】
|
6天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
11 0