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 09 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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 XML操作类DOMDocument
2009/12/16 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
vue实现文件上传功能
2018/08/13 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
pygame实现成语填空游戏
2019/10/29 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
小学毕业感言50字
2014/02/16 职场文书
数字化校园建设方案
2014/05/03 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
求职推荐信范文
2015/03/27 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python