• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > js和jquery中获取非行间样式

js和jquery中获取非行间样式

作者:课桌上画青春 字体:[增加 减小] 来源:互联网 时间:2017-05-11

课桌上画青春通过本文主要向大家介绍了js获取非行间样式,js获取行间样式,行间样式,获取非行间样式的函数,获取非行间样式等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

样式又分为了行间样式和非行间样式。一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然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也可以,只要带一个参数,值您任意,高兴就好。
 }
</div>

好了,就封装这么个简单的函数,在获取非行间元素的时候调用一下就ok了哦。(ps:比如说getStyle(oDiv,'width'))

jquery中

其实我以为在jquery中需要用跟js中一样的封装的那个函数;好吧,结果根本不用。直接用方法就ok

首先是用jquery中的width()和height()方法(这两个方法获取的只包含内容区域的宽高,这个获取的数据类型是number),(ps:除此以外,outerWidth() ,outerHeight()这两个方法是获取盒子模型中的包含内边距和边框的宽度和高度)

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • js和jquery中获取非行间样式

相关文章

  • 2017-05-11微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
  • 2017-05-11tablesorter.js表格排序使用方法(支持中文排序)
  • 2017-05-11详解vue表单验证组件 v-verify-plugin
  • 2017-05-11老生常谈的跨域处理
  • 2017-08-02Ajax上传如何实现文件上传进度条
  • 2017-05-11Node.js websocket使用socket.io库实现实时聊天室
  • 2017-05-11jquery.flot.js简单绘制折线图用法示例
  • 2017-05-11微信小程序 轮播图swiper详解及实例(源码下载)
  • 2017-05-11jQuery实现弹窗居中效果类似alert()
  • 2017-05-11浅谈Vue.js

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • React中ES5与ES6写法的区别总结
    • angularjs 实现带查找筛选功能的select下拉框实例
    • js 键盘按下抬起 简单应用
    • 微信小程序开发之选项卡(窗口底部TabBar)页面切换
    • 使用vue.js实现联动效果的示例代码
    • 深入解析js轮播插件核心代码的实现过程
    • 详谈js中window.location.search的用法和作用
    • Angular在一个页面中使用两个ng-app的方法(二)
    • 微信小程序 五星评价功能的实现
    • 微信小程序 css使用技巧总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有