JQuery操作元素的属性与样式及位置
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script>
<script type="text/javascript" defer>
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。 //==================================操作元素属性================================== //返回元素指定属性值
var txt1_val=$("#txt1").attr("value"); //通过元素的DOM属性名更改DOM属性值
$("#txt1").attr({ value : "txt1_value" , className : "txt1_class" }); //通过指定元素属性改变元素属性值
$("#txt1").attr("class","txt1_class2"); //给指定元素属性赋值,通过后面捆绑的方法返回值
$("#txt1").attr("class",function(){
return "txt1_class3";
}) //移除指定的元素属性
$("#txt1").removeAttr("class"); //==================================修改CSS类================================== //给CSS类即class元素属性添加一个属性值,可以添加多个之间用空格分开以下的对CSS类操作函数同样可以填入多个CSS类
$("#txt1").addClass("txt1_class txt1_class2"); //判断是否已有该CSS类,返回真假
$("#txt1").hasClass("txt1_class txt1_class2"); //移除指定CSS类,用空格分开,如无指定则删除该元素所有CSS类
$("#txt1").removeClass("txt1_class"); //判断是否有这个CSS类,有就删除,没有就添加
$("#txt1").toggleClass("txt1_class"); //根据后面的返回真则添加此CSS类,假则删除此CSS类
$("#txt1").toggleClass("txt1_class",false); //==================================修改CSS属性================================== //返回指定CSS样式值
$("#txt1").css("color"); //一次赋多个样式
$("#txt1").css({color:"#ff0011",background:"blue"}); //一次赋一个指定的样式
$("#txt1").css("color","black"); //==================================宽和高相关================================== //设置元素的高度,无值则返回该元素的高度单位像素
$("#txt1").height(); //设置元素的宽度,无值则返回该元素的宽度
$("#txt1").width(); //获取元素的内部高度,不包括边框
$("#txt1").innerHeight(); //获取元素内部宽度,不包括变宽
$("#txt1").innerWidth(); //获取元素外部高度,包括边框
$("#txt1").outerHeight(); //获取元素外部宽度,包括边框
$("#txt1").outerWidth(); //==================================位置相关================================== //获取元素相对窗口的偏移位置,返回两个值,一个top值,一个left值
var txt1_offset=$("#txt1").offset();
var top=txt1_offset.top;
var left=txt1_offset.left; //返回相对父元素的相对偏移位置,返回两个值一个top,一个left
var txt1_position=$("#txt1").position();
var top=txt1_position.top;
var left=txt1_position.left; //针对的元素具有垂直滚动条,设置从总体内容向下的第20行像素开始,显示在滚动条可视窗口内上方顶端
//如无参数,则返回当前滚动条可视窗口上方顶点位置,距离整体内容上方顶点的距离
$("#div_outer").scrollTop(); //针对的元素具有横向滚动条,设置从总体内容左侧的第20列像素开始,显示在滚动条可视窗口内左端顶点
//如无参数,则返回当前滚动条可视窗口左端顶点位置,距离整体内容左端顶点的距离
$("#div_outer").scrollLeft();
</script>
<input type="text" name="txt1" id="txt1" class="txt1" value="txt1"/> <div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="div_outer">
<div style="width:300px;height:300px;background-color:#FFFF00;" id="div_inner">
这些文字显示在内层元素中。
</div>
</div>
JQuery操作元素的属性与样式及位置的更多相关文章
- JQuery操作元素的属性与样式及位置 复制代码
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 使用jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- 《从零开始学习jQuery》:用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- jQuar总结10:jQuery操作元素的属性
jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...
- JQuery快速入门-操作元素的属性和样式
我们在学习JavaScript时,详细介绍了DOM对象.从DOM树可以得知,对DOM的操作,主要包括:元素的属性.内容.值.CSS. 一.元素属性的操作 在 jQuery 中,可以对元素的属性执行获取 ...
- jQuery操作元素的class属性
今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...
随机推荐
- CSS cursor 属性改变鼠标的样式
可能的值 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默 ...
- [POI2007]ZAP-Queries (莫比乌斯反演+整除分块)
[POI2007]ZAP-Queries \(solution:\) 唉,数论实在有点烂了,昨天还会的,今天就不会了,周末刚证明的,今天全忘了,还不如早点写好题解. 这题首先我们可以列出来答案就是: ...
- Android:(本地、可通信的、前台、远程)Service使用全面介绍
2.具体使用解析 2.1 本地Service 这是最普通.最常用的后台服务Service. 2.1.1 使用步骤 步骤1:新建子类继承Service类 需重写父类的onCreate().onStart ...
- Python写黑客小工具,360免杀
构思: client:反向连接server,执行shell命令 server:发送命令,控制客户端 import subprocess import socket import threading t ...
- C++获取当前所有进程的完整路径
实现代码 #include <stdio.h> #include <windows.h> #include <tlhelp32.h> #include <st ...
- 如何读取Linux键值,输入子系统,key,dev/input/event,dev/event,C语言键盘【转】
转自:https://blog.csdn.net/lanmanck/article/details/8423669 相信各位使用嵌入式的都希望直接读取键值,特别是芯片厂家已经提供input驱动的情况下 ...
- WIN10 ISO 官方
WIN10 ISO 官方: https://www.microsoft.com/zh-cn/software-download/windows10ISO/
- python实现监控windows服务控制开关服务
转载自 :http://www.jb51.net/article/49106.htm #!/usr/bin/env python #-*- encoding:utf-8 -*- "" ...
- (网络编程)基于tcp(粘包问题) udp协议的套接字通信
import socket 1.通信套接字(1人1句)服务端和1个客户端 2.通信循环(1人多句)服务端和1个客户端 3.通信循环(多人(串行)多句)多个客户端(服务端服务死:1个客户端---&g ...
- 使用rpm包安装lamp环境
前提: 是你的centos能联网,或者有本地的yum仓库 或者配置通过代理上网 vim /etc/yum.conf 加入如下内容 proxy=http://192.168.11.82:808 1.通过 ...