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插件
Mar 29 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jquery实现抽奖功能
Oct 22 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的十大要点(上)
2009/02/04 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
初学Javascript的一些总结
2008/11/03 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
python简单判断序列是否为空的方法
2015/06/30 Python
使用python 3实现发送邮件功能
2018/06/15 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Django实现内容缓存实例方法
2020/06/30 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
天网工程实施方案
2014/03/26 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
2019教师的学习计划
2019/06/25 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB