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用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
如何基于jQuery实现五角星评分
Sep 02 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 htmlspecialchars加强版
2010/02/16 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
jquery使用经验小结
2015/05/20 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
Angular工具方法学习
2016/12/26 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python文件排序的方法总结
2020/09/13 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
如何安装ruby on rails
2014/02/09 面试题
最新自我评价范文
2013/11/16 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
安全生产目标责任书
2014/04/14 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
个人工作年终总结
2015/03/09 职场文书
学习心理学心得体会
2016/01/22 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers