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图片放大镜效果
Jun 23 jQuery
jQuery常用选择器详解
Jul 17 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jquery实现拖拽添加元素功能
Dec 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
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python理解递归的方法总结
2019/01/28 Python
Python 学习教程之networkx
2019/04/15 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python datetime模块的使用示例
2021/02/02 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
Unix控制后台进程都有哪些进程
2016/09/22 面试题
老同学聚会感言
2014/02/23 职场文书
关爱留守儿童标语
2014/06/18 职场文书
法人授权委托书范本
2014/09/17 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
春风化雨观后感
2015/06/11 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript