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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery实现鼠标滑动切换图片
May 27 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
第十一节 重载 [11]
2006/10/09 PHP
打造计数器DIY三步曲(下)
2006/10/09 PHP
php 随机生成10位字符代码
2009/03/26 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python定时器线程池原理详解
2020/02/26 Python
Python ATM功能实现代码实例
2020/03/19 Python
python在协程中增加任务实例操作
2021/02/28 Python
高中毕业生自我鉴定
2013/11/03 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
抽样调查项目计划书
2014/04/24 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis