用JQuery操作元素的style属性
可以直接利用css()方法获取元素的样式属性,JQuery代码如下:
1
|
$( "p" ).css( "color" ); //获取p元素的样式颜色
|
无论color属性是外部CSS导入,还是直接拼接在HTML元素里(内联),css()方法都可以获取到属性style里的其他属性的值。
也可以直接利用css()方法设置某个元素的单个样式,例如:
1
|
$( "p" ).css( "color" , "red" ); //设置p元素的样式颜色为红色
|
与attr()方法一样,css()方法也可以同时设置多个样式属性,代码如下:
1
|
//同时设置字体大小和背景色
|
2
|
$( "p" ).css({ "fontSize" : "30px" , "backgroundColor" : "#ccc" });
|
如果值是数字,将会被自动转化为像素值。在css()方法中,如果属性中带有“-”符号,例如font-size和background-color属性,如果在设置这些属性的值的时候不带引号,那么就要用驼峰式写法,比如上面的代码,如果带上了引号,既可以写成“font-size”,也可以写成“fontSize”。总之建议大家加上引号,养成良好的习惯。
对透明度的设置,可以直接使用opacity属性,jQuery已经处理好了兼容性的问题,如下代码所示,将p元素的透明度设置为半透明:
1
|
$( "p" ).css( "opacity" , "0.5" );
|
如果需要获取某个元素的height属性,则可以通过如下JQuery代码实现:
1
|
$(element).css( "height" );
|
在jQuery中还有另外一种方法也可以获取元素的高度,即height()。它的作用是取得匹配元素当前计算的高度值(px):
1
|
$( "p" ).height(); //获取p元素的高度值
|
height()方法也能用来设置元素的高度,如果传递的值是一个数字,则默认单位为px。如果要用其他单位(例如em),则必须传递一个字符串,JQuery代码如下:
1
|
$( "p" ).height( "100px" ); //设置p元素的高度值为l00px
|
2
|
$( "p" ).height( "2em" ); //设置p元素的高度值为2em
|
- 在jQuery l.2版本以后的height()方法可以用来获取window和document的高度。
- 两者的区别是:css()方法获取的高度值与样式的设置有关,可能会得到“auto”,也可能得到”10px”之类的字符串;而height()方法获取的高度值则是元素在页面中的实际高度,与样式的设置无关,并且不带单位。
与height()方法对应的还有一个width()方法,它可以取得匹配元素的宽度值(px)。
1
|
$( "p" ).width(); //获取p元素的宽度值
|
同样,width()方法也能用来设置元素的宽度。
1
|
$( "p" ).width( "400px" ); //设置p元素的宽度值为400px
|
offset()方法
它的作用是获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效。例如用它米获取p元素的的偏移量:
1
|
var offset = $( "p" ).offset(); //获取p元素的offset()
|
2
|
var left = offset.left; //获取左偏移
|
3
|
var top = offset.top; //获取右偏移
|
position()方法
它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性,即top和left。JQuery代码如下:
1
|
var position = $( "p" ).position(); //获取p元素的position()
|
2
|
var left = position.left; //获取左偏移
|
3
|
var top = position.top; //获取右偏移
|
scrollTop()方法和scrollLeft()方法
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。例如使用下面的代码获取p元素的滚动条距离:
1
|
var $p = $( "p" );
|
2
|
var scrollTop = $p.scrollTop(); //获取元素的滚动条距顶端的距离
|
3
|
var scrollLeft = $p.scrollLeft(); //获取元素的滚动条距左侧的距离
|
另外,可以为这两个方法指定一个参数,控制元素的滚动条滚动到指定位置。例如使用如下代码控制元素内的滚动条滚动到距顶端300和距左侧300的位置:
1
|
$( "textarea" ).scrollTop (300); //元素的垂直滚动条滚动到指定的位置
|
2
|
$( "textarea" ).scrollLeft (300); //元素的横向滚动条滚动到指定的位置
|
至此,已经将jQuery中常用的DOM操作(包括DOM Core,HTML-DOM和CSS-DOM)都已经介绍完毕。
转载于:https://www.cnblogs.com/telwanggs/p/4862836.html
用JQuery操作元素的style属性相关推荐
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- jQuery框架学习第四天:使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- [转帖]jQuery框架学习第四天:使用jQuery操作元素的属性与样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
- [乐意黎转载]从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
- jQuery操作元素属性、jQuery循环
jQuery操作元素属性.jQuery循环 1.prop() 取出或设置某个属性的值 2.html() 取出或设置html内容 3. 手风琴效果实现: 4.jQuery的循环: 1.prop() 取出 ...
- jQuery操作元素和DOM
一.操作元素 Ⅰ.操作文本内容 ①语法text() ②替换文本内容 ③以纯文本方式实现, 不能是标签 <!DOCTYPE html> <html lang="en" ...
- 【jQuery学习】—jQuery操作元素位置
[jQuery学习]-jQuery操作元素位置 一.position方法 作用:返回相对某个元素的偏移量 格式:元素.position() 返回值包含top属性和left属性的对象 如果祖先元素中没有 ...
- jQuery 学习-DOM篇(一):jQuery 创建元素并添加属性
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- JQuery获取元素的display属性
JQuery获取元素的display属性 $('#input_id').css('display')
最新文章
- java reduce.mdn_reduce高级用法
- STM32启动过程分析
- 二进制蚁群算法【源码实现】
- boost::hana::take_back用法的测试程序
- mysql 三主_MySQL主主复制3
- Linux 多线程开发-线程的结束pthread_kill和pthread_cancel
- 用户需求、己、竞争对手的关系
- WinForm的App.config
- 艰苦的网购火车票,周末可以不用再秒杀余票了
- PAT 乙级 1043. 输出PATest(20) Java版
- JavaEE大型项目实战视频教程
- Luogu1525 关押罪犯
- 基本知识 100040
- html5的header标签
- TAPD关联Jenkins
- C语言程序设计今天下雨了吗,C语言编程模拟下雨by张田浩
- 电脑下方的任务栏点不动了怎么办???
- 互联网公司分布式集群架构图入门解析(简单通俗易懂,超详细)
- selenium.common.exceptions.WebDriverException: Message: unable to set
- 11月22日训练题解
热门文章
- (99)FPGA ROM实现(V实现)
- (27)Verilog HDL循环语句:while
- 微信找不到nfc功能_苹果ios 14一周深度体验,这3个功能尤其好用,你还没发现吗?...
- 安装win10 无网络_微软已修复Win10“无网络连接”问题 已在Dev频道测试
- 鸿蒙应用开发--事件
- Mysql简介和Mysql优化查询的方法
- 字符设备驱动之cdev_init()系列函数
- maven服务器项目,Maven项目搭建
- mysql to_minute_mysql的时间转化
- java复习系列[5] - Java 中的设计模式