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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jquery插件懒加载的示例
Oct 24 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 万年历实现代码
2012/10/18 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
js转html实体的方法
2016/09/27 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
详解Vue中状态管理Vuex
2017/05/11 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python标准库内置函数complex介绍
2014/11/25 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
实例讲解python中的协程
2018/10/08 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
自我评价范文分享
2014/01/04 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
PyTorch的Debug指南
2021/05/07 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers