样式又分为了行间样式和非行间样式。一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然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. 【OpenCV3】cvRound()、cvFloor()、cvCeil()函数详解

    函数cvRound().cvFloor().cvCeil()都是按照一种舍入方式将浮点型数据转换为整型数据. cvRound():返回跟参数最接近的整数值,即四舍五入: cvFloor()  :返回不 ...

  2. windows server 2016安装docker

    最近微软发布了windows server 2016,并原生支持docker,本文通过一系列的步骤,来学习怎么在windows server 2016安装docker. 1.下载 windows se ...

  3. 安卓开发——ListView控件(初始化ListView、列表刷新、长按添加menu)

    前言: ListView——列表,它作为一个非常重要的显示方式,不管是在Web中还是移动平台中,都是一个非常好的.不开或缺的展示信息的工具.在Android中,ListView控件接管了这一重担,在大 ...

  4. HUE配置文件hue.ini 的hbase模块详解(图文详解)(分HA集群和非HA集群)

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  5. Struts 2初体验

    Struts2简介: Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数 ...

  6. sass中@的作用

    总结一下sass中用到@的地方. 1.继承@extend SASS允许一个选择器,继承另一个选择器.比如,现有class1: .class1 { border: 1px solid #ddd; } c ...

  7. tomcat启动(三)Catalina简要分析

    上篇解析Bootstrap到 daemon.setAwait(true); daemon.load(args); daemon.start(); 这三个方法实际是反射调用org.apache.cata ...

  8. 终极 shell zsh

    在mac上安装zsh,推荐安装. 参见http://macshuo.com/?p=676. 安装成功提示,看着很帅的样子

  9. funny alphabet

    1.A Boy Can Do Everything For Girl 2. He Is Just Kidding 3. Love Must Need Our Patience

  10. 任务四十二:UI组件之日历组件(三)

    任务四十二:UI组件之日历组件(三) 面向人群: 有一定基础的同学 难度: 困难 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及 ...