样式又分为了行间样式和非行间样式。一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相同,唯一性)

那么来说说在js和jquery中,有时候需要获取元素的样式,比如说width或者height,在这种情况下如何获取?

js中

1、行间样式:

相信大家无论是看书还是咋滴,都知道怎么获取行间样式吧,就是利用一个style:

这种利用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()这两个方法是获取盒子模型中的包含内边距和边框的宽度和高度)

还有一种方法获取非行间样式,使用css()方法,这个方法获取的数据类型是string

恩恩,差不多就是这么多。over!

js和jquery中获取非行间样式的更多相关文章

  1. js兼容总结之获取非行间样式

    非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...

  2. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

  3. js获取非行间样式/定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  4. JS获取非行间样式及兼容问题

    获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. js获取非行间样式或定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  6. js获取非行间样式/写入样式(行间)

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  7. JavaScript获取非行间样式/定义样式

    html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...

  8. 获取非行间样式getComputedStyle

    有如下代码: 1 2 3 div {     width: 200px; } 1 2 3 <div id="aa" style="height: 100px;&qu ...

  9. JS获取非行间样式

    我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...

随机推荐

  1. 电脑网络IP固定地址自动改变!

    今天电脑的固定IP地址每次重启设备,会自动改变一次.所以每次重启电脑都要手动重设IP地址.网关.DNS及高级选项中的ip设置. 高级选项中的ip设置每次都有2个ip,都要我删除一个.我都崩溃了,还以为 ...

  2. 在VMware 14中安装Centos7

    在VMware 14中安装Centos7 一.安装前准备 安装VMware14.1 Centos7 64位镜像下载 在VMware中安装Centos7的步骤为: 1.创建虚拟机 创建虚拟机有两种方式: ...

  3. Monkey学习笔记<五>:检查内存泄露

    1.分析内存泄漏工具与命令 1)HPROF文件:HPROF可以监控CPU使用率,堆分配统计 2)MAT工具:下载地址(http:www.eclipse.org/mat/) 3)生成HPROF文件命令: ...

  4. spark 中如何查看单个RDD分区的内容(创建分区,查看分区数)

    spark 创建分区 val scores = Array(("Fred", 88), ("Fred", 95), ("Fred", 91) ...

  5. linux把程序添加到全局环境变量

    比如把, nginx服务放到全局变量 ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/ /usr/local/bin/就是环境变量目录

  6. Ubuntukylin-14.04-desktop(带分区)安装步骤详解

    不多说,直接上干货! 成功! Ubuntukylin-14.04-desktop( 不带分区)安装步骤详解 Ubuntukylin-14.04-desktop( 不带分区)安装步骤详解 Ubuntu1 ...

  7. Windows 添加用户

    不多说,直接干货! 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http://www.cnblogs.com/zl ...

  8. 解决chrome,下载在文件夹中显示,调用错误的关联程序

    https://blog.csdn.net/qq_32337527/article/details/81778732?utm_source=blogxgwz0

  9. Linux-(kill,wc,killall,ln,cal,date)

    kill命令 1.命令格式: kill [参数] [进程号] 2.命令功能: 发送指定的信号到相应进程.不指定型号将发送SIGTERM(15)终止指定进程.如果仍无法终止该程序可用“-KILL” 参数 ...

  10. 桌面程序开发入门(WinForm with C#)

    1.使用Visual Studio 2013创建新项目 2.创建一个主窗体和4个子窗体 3.创建一个数据库.一个表.一个存储过程 4.在配置文件里添加数据库连接字符串 5.真正的编码工作. 第一步:创 ...