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实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 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
Look And Say 序列php实现代码
2011/05/22 PHP
php 定义404页面的实现代码
2012/11/19 PHP
PHP输出日历表代码实例
2015/03/27 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PDO::errorCode讲解
2019/01/28 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
Python图算法实例分析
2016/08/13 Python
简单谈谈python中的多进程
2016/11/06 Python
Python iter()函数用法实例分析
2018/03/17 Python
详解python中的线程与线程池
2019/05/10 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
django修改models重建数据库的操作
2020/03/31 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
PHP新手指南
2021/04/01 PHP
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python