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复合事件用法示例
Jun 10 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
Python pip 常用命令汇总
2020/10/19 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
为什么要做架构设计
2015/07/08 面试题
学生会竞选自荐信
2013/10/12 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
保险经纪人求职信
2014/03/11 职场文书
奠基仪式主持词
2014/03/20 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
教你用python实现12306余票查询
2021/06/30 Python