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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
Javascript实现的分页函数
2007/02/07 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
vue中@change兼容问题详解
2019/10/25 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
对python中dict和json的区别详解
2018/12/18 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
jupyter notebook实现显示行号
2020/04/13 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
优秀本科毕业生自荐信
2014/07/04 职场文书
投资意向书
2014/07/30 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android