先看一段代码,为了体现一会下面说的js用style获取css样式的不同

一:给div设置margin-left(用style设置css样式没什么问题)

box.style.marginLeft="20px";

二:通过style获取div的css属性

  上面的例子用三种形式给div设置了样式

   1:行间样式 直接写到标签中

   2:内联样式 写到head头中

   3:外联样式,用link加载

   

分别获取,这三种形式设置的样式

console.log(box.style.width);
console.log(box.style.fontSize);
console.log(box.style.color);

运行如下:前两个都没有获取到,都是空

总结:所以用style获取css样式,只能获取到写到标签内的样式。

三:但是可以通过getComputedStyle方法 获得

  document.defaultView是个只读对象,返回当前document对象所关联的window对象,没有返回null,(IE9以下不支持),里面的getComputedStyle()方法

  getComputedStyle()两个参数,一是元素,而是伪类,如果没有伪类,则为null

var computedStyle = document.defaultView.getComputedStyle(box,null);

  返回的是box元素所有样式的一个对象

此时你在获取

console.log(computedStyle.width);
console.log(computedStyle.fontSize);
console.log(computedStyle.color);

得到可以得到了哈哈哈,还没结束,因为IE9以下不支持getComputedStyle

IE9以下用currentStyle

box.currentStyle

返回的也是对象,同document.defaultView.getComputedStyle相似,所有这么写

var computedStyle= box.currentStyle?box.currentStyle:document.defaultView.getComputedStyle(box,null);
alert(computedStyle.width);

加油!

js 设置 获取css样式的更多相关文章

  1. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  2. 为什么我获取不到这个css样式?js原生获取css样式总结

    还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...

  3. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  4. js中获取css样式的两种方式

    1. 对象.style.样式名  弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...

  5. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  6. js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法

    用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...

  7. js获取css样式方法

    一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: ...

  8. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 重温JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

随机推荐

  1. SQLHelp帮助类

    public readonly static string connStr = ConfigurationManager.ConnectionStrings["conn"].Con ...

  2. rsync实现免密码操作的一种实现方式

    rsync是远程文件同步协议,在linux系统下,操作服务器之间的文件同步,是非常方便高效的. 但是,简单的rsync操作,往往需要和用户交互,需要用户输入密码,这个对于结合应用系统使用,比如Java ...

  3. IOS开发之后台处理

    1 前言IOS4 之后提供了后台处理,在后台运行应用程序,在一些情形下甚至可以在用户按下Home按钮之后在后台运行. 2 详述IOS可以在用户按下Home按钮后将应用程序添加到暂停状态.这种暂停执行的 ...

  4. Ubuntu 下一个可用的音乐播放器

    参考:http://www.pairsdoll.com/install-audacious-music-palyer-in-ubuntu.html/ 方法:打开terminal,sudo apt-ge ...

  5. 【js数据结构】栈解决佩兹糖果盒问题

    现实生活中栈的一个例子是佩兹糖果盒. 想象一下你有一盒佩兹糖果, 里面塞满了红色. 黄色和白色的糖果, 但是你不喜欢黄色的糖果. 使用栈( 有可能用到多个栈) 写一段程序, 在不改变盒内其他糖果叠放顺 ...

  6. BotVS配置托管者-基于阿里云

    1. 上传Linux 64位 托管者并解压在 https://www.botvs.com/m/add-node 上下载Linux 64位 托管者, 当前下载地址 https://dn-botvs.qb ...

  7. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  8. centos7系统日志时间与系统时间相差8小时

    场景:当我们修改完系统时间的时区后,我们去查看我们的系统日志的时间发现时区还是在之前的系统时间时区. [root@vp-n ~]# ls -l /etc/localtime lrwxrwxrwx 1 ...

  9. VC++安装及使用

    1.在浏览器上下载后不能安装 2.黄振古QQ发原文件,依然不能安装 3.考虑后,想通过360压缩安装 4.浏览器上下载的360压缩大多有病毒,无奈下,删掉鲁大师,下载360安全卫士,通过360下载36 ...

  10. python简单实现tftp客户端(基于udp)

    TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂.开销不大的文件传输服务 ...