文档章节

常用jquery 获取、改变元素属性值

墨鱼拉面
 墨鱼拉面
发布于 2016/11/22 01:48
字数 689
阅读 1
收藏 0

标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。 

  1. //返回元素指定属性值  
  2. var txt1_val=$("#txt1").attr("value");  
  3. //通过元素的DOM属性名更改DOM属性值  
  4. $("#txt1").attr({value : "txt1_value" , className : "txt1_class" });  
  5. //通过指定元素属性改变元素属性值  
  6. $("#txt1").attr("class","txt1_class2");  
  7. //给指定元素属性赋值,通过后面捆绑的方法返回值  
  8. $("#txt1").attr("class",function(){  
  9.    return"txt1_class3";  
  10. })  
  11. //移除指定的元素属性  
  12. $("#txt1").removeAttr("class");  
  13.   
  14. //给CSS类即class元素属性添加一个属性值,可以添加多个之间用空格分开以下的对CSS类操作函数同样可以填入多个CSS类  
  15. $("#txt1").addClass("txt1_classtxt1_class2");  
  16. //判断是否已有该CSS类,返回真假  
  17. $("#txt1").hasClass("txt1_classtxt1_class2");  
  18. //移除指定CSS类,用空格分开,如无指定则删除该元素所有CSS类  
  19. $("#txt1").removeClass("txt1_class");  
  20. //判断是否有这个CSS类,有就删除,没有就添加  
  21. $("#txt1").toggleClass("txt1_class");  
  22. //根据后面的返回真则添加此CSS类,假则删除此CSS类  
  23. $("#txt1").toggleClass("txt1_class",false);  
  24.   
  25. //返回指定CSS样式值  
  26. $("#txt1").css("color");  
  27. //一次赋多个样式  
  28. $("#txt1").css({color:"#ff0011",background:"blue"});  
  29. //一次赋一个指定的样式  
  30. $("#txt1").css("color","black");  
  31.   
  32. //设置元素的高度,无值则返回该元素的高度单位像素  
  33. $("#txt1").height(25);  
  34. //设置元素的宽度,无值则返回该元素的宽度  
  35. $("#txt1").width(150);  
  36. //获取元素的内部高度,不包括边框  
  37. $("#txt1").innerHeight();  
  38. //获取元素内部宽度,不包括变宽  
  39. $("#txt1").innerWidth();  
  40. //获取元素外部高度,包括边框  
  41. $("#txt1").outerHeight();  
  42. //获取元素外部宽度,包括边框  
  43. $("#txt1").outerWidth();  
  44.   
  45. //获取元素相对窗口的偏移位置,返回两个值,一个top值,一个left值  
  46. var txt1_offset=$("#txt1").offset();  
  47. var top=txt1_offset.top;  
  48. var left=txt1_offset.left;  
  49. //返回相对父元素的相对偏移位置,返回两个值一个top,一个left  
  50. var txt1_position=$("#txt1").position();  
  51. var top=txt1_position.top;  
  52. var left=txt1_position.left;  
  53.   
  54. //针对的元素具有垂直滚动条,设置从总体内容向下的第20行像素开始,显示在滚动条可视窗口内上方顶端  
  55. //如无参数,则返回当前滚动条可视窗口上方顶点位置,距离整体内容上方顶点的距离  
  56. $("#div_outer").scrollTop(20);  
  57. //针对的元素具有横向滚动条,设置从总体内容左侧的第20列像素开始,显示在滚动条可视窗口内左端顶点  
  58. //如无参数,则返回当前滚动条可视窗口左端顶点位置,距离整体内容左端顶点的距离  
  59. $("#div_outer").scrollLeft(20);  

本文转载自:

上一篇: canvas坑
下一篇: Canvas画电路图
墨鱼拉面
粉丝 0
博文 17
码字总数 1757
作品 0
深圳
程序员
私信 提问
Java程序员从笨鸟到菜鸟之(八十八)跟我学jquery(四)JQuery框架操作元素的属性与样式

在前面几篇博客中,我们初步了解了一下jquery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,...

长平狐
2012/11/12
38
0
Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵
2018/06/21
0
0
jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl
2018/05/16
35
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
2018/07/31
18
0
jQuery中attr()和prop()方法的一些区别理解

昨天在开发的时候同事帮忙写了一小段JS代码,取数据的时候用到了以前都没用过的的这种形式,后来看了手册才知道在HTML5中可以对元素进行自定义属性。格式类似于,然后可以用JQ中的方法进行存取...

一个向往前端的后端工程师
2018/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
5
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
8
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部