js和jquery中获取非行间样式
更新时间：2017年05月05日 11:51:53 作者：课桌上画青春
本篇文章主要介绍了js和jquery中获取非行间样式的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
样式又分为了行间样式和非行间样式。一般来说行间样式用的是比较少的，因为它能够作用的范围就只有一个元素，而非行间样式的作用范围可以是一类元素（即拥有相同德标签，或者说是有相同的类名，(当然id名不可能相同，唯一性)
那么来说说在js和jquery中，有时候需要获取元素的样式，比如说width或者height，在这种情况下如何获取?
js中
1、行间样式：
相信大家无论是看书还是咋滴，都知道怎么获取行间样式吧，就是利用一个style：
这种利用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()这两个方法是获取盒子模型中的包含内边距和边框的宽度和高度）
还有一种方法获取非行间样式，使用css（）方法，这个方法获取的数据类型是string
恩恩，差不多就是这么多。over！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
相关文章
JS高级笔记，学习js的朋友可以参考下。2011-07-07
这篇文章主要为大家详细介绍了微信小程序实现地区选择伪五级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
这篇文章主要是对JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
一个项目后期测试发现浏览器内存一直居高不下，而且打开iframe页面越多内存占用越大，在IE系列浏览器中尤其明显，下面与大家分享下iframe动态创建及释放内存2014-09-09
sort会调用每一项的toString方法进行比较，下面为大家介绍下JS中数组sort方法的具体使用2014-01-01
这篇文章主要介绍了微信浏览器左上角返回按钮监听的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家分享了7个去伪存真的JavaScript面试题，希望本文可以帮助大家比较顺利的通过面试，感兴趣的小伙伴们可以参考一下2016-01-01
使用Webpack压缩与转译JavaScript代码的操作方法
在Web开发中,代码的性能和加载时间是用户体验的重要组成部分,为此,将JavaScript代码压缩和优化是发布前一个必不可少的步骤,所以本文给大家介绍了如何使用Webpack压缩与转译JavaScript代码,需要的朋友可以参考下2024-05-05
这篇文章主要为大家详细介绍了js实现可爱的气泡特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论