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平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
考博专家推荐信模板
2013/12/02 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
刑事案件上诉状
2015/05/23 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
雷锋电影观后感
2015/06/10 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
采购部年度工作总结
2015/08/13 职场文书
2016特色励志班级口号
2015/12/24 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers