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
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery实现穿梭框功能
Jan 19 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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php实现上传图片文件代码
2015/07/19 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php命令行写shell实例详解
2018/07/19 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
python如何生成各种随机分布图
2018/08/27 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
运动会领导邀请函
2014/01/10 职场文书
先进个人获奖感言
2014/01/24 职场文书
2014年老干部工作总结
2014/11/21 职场文书
员工辞退通知书
2015/04/17 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python