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 05 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 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简单提示框alert封装函数
2010/08/08 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
Array对象方法参考
2006/10/03 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
js实现表格数据搜索
2020/08/09 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python交换变量
2008/09/06 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
python如何建立全零数组
2020/07/19 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
致裁判员加油稿
2014/02/08 职场文书
运动会通讯稿150字
2014/02/15 职场文书
教师节活动主持词
2014/04/02 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
学校2014年度工作总结
2014/12/06 职场文书
升职自荐书
2019/05/09 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
JS数组去重详情
2021/11/07 Javascript