js和jquery中获取非行间样式


Posted in jQuery onMay 05, 2017

样式又分为了行间样式和非行间样式。一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相同,唯一性)

那么来说说在js和jquery中,有时候需要获取元素的样式,比如说width或者height,在这种情况下如何获取?

js中

1、行间样式:

相信大家无论是看书还是咋滴,都知道怎么获取行间样式吧,就是利用一个style:

js和jquery中获取非行间样式

这种利用style的方式获取的只能是行间样式。

2、非行间样式

此处我就直接上封装的函数了,就不在编辑器中编辑运行了

function getStyle(obj,attr)
{
    if(obj.currentStyle)
   {
        return obj.currentStyle[attr];
      }
    else
     return getComputedStyle(obj,null)[attr];//放null参数的那个地方放false也可以,只要带一个参数,值您任意,高兴就好。
 }

好了,就封装这么个简单的函数,在获取非行间元素的时候调用一下就ok了哦。(ps:比如说getStyle(oDiv,'width'))

jquery中

其实我以为在jquery中需要用跟js中一样的封装的那个函数;好吧,结果根本不用。直接用方法就ok

首先是用jquery中的width()和height()方法(这两个方法获取的只包含内容区域的宽高,这个获取的数据类型是number),(ps:除此以外,outerWidth() ,outerHeight()这两个方法是获取盒子模型中的包含内边距和边框的宽度和高度)

js和jquery中获取非行间样式

还有一种方法获取非行间样式,使用css()方法,这个方法获取的数据类型是string

js和jquery中获取非行间样式

恩恩,差不多就是这么多。over!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 #jQuery
jquery中封装函数传递当前元素的方法示例
May 05 #jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 #jQuery
jQuery树插件zTree使用方法详解
May 02 #jQuery
jQuery Tree Multiselect使用详解
May 02 #jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 #jQuery
jQuery实现按比例缩放图片的方法
Apr 29 #jQuery
You might like
再次研究下cache_lite
2007/02/14 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
php面向对象重点知识分享
2019/09/27 PHP
区分JS中的undefined,null,"",0和false
2007/03/08 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
python笔记(2)
2012/10/24 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
花店创业计划书范文
2014/02/07 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers