js获取css的各种样式并且设置他们的方法
js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面;
这里我们就需要:
下面这个代码主要是设置为了兼容IE这孙子;
function getStyle(element, attr) { if (element.currentStyle) { return element.currentStyle[attr];//傻逼IE的获取元素的方法 } else { return getComputedStyle(element, null)[attr]; } }
平时我们一般可以用 getComputedStyle(元素,null)[属性]
以上这篇js获取css的各种样式并且设置他们的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
JS读写CSS样式的方法汇总
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如:var elm = document.getElementById('test'); elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().remo
-
解析js如何获取css样式
一.获取内联样式 <div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div> <script> var myDiv = document.getElementById("myDiv"); alert(myDiv.style.width);//100px alert(m
-
JS之获取样式的简单实现方法(推荐)
基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:yellow; } </style> </head> <body> <div style="width:100
-
js获取css的各种样式并且设置他们的方法
js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设置为了兼容IE这孙子; function getStyle(element, attr) { if (element.currentStyle) { return element.currentStyle[attr];//傻逼IE的获取元素的方法 } else { return getCompute
-
JS获取CSS样式(style/getComputedStyle/currentStyle)
CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar
-
js获取元素外链样式的方法
本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge
-
JS获取和修改元素样式的实例代码
1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style
-
js 获取元素的具体样式信息getcss(实例讲解)
如果想获取元素的某一个具体的样式属性值 1.元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的) console.log(box.style.height) ->null 在真实项目中,这种方式不常用,因为不能为了获取值而把所有的样式都写在行内(无法实现html和css的分离) 2.使用window.getComputedStyle(当前操作的元素对象,当前元素的伪类[一般我们不用伪类写null])这个方法获取所有经过浏览器计算过的样式 所有经过浏览器
-
原生js获取left值和top值的三种方法
在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值.比如做一个碰撞广告,就要不停的获取元素的top和left属性值. 需要注意的事:取值的元素必须要设置position:absolute绝对定位属性,才能取的到left值. 第一种方法,比较简单,就是直接通过obj.style.left和obj.style.top,但是有局限性,这种获取的方法只能获取到行内样式的left和top的属性值,不能获取到style标签和link 外部引用的left和top属性值. 第二种方法 只读
-
js获取及修改网页背景色和字体色的方法
本文实例讲述了js获取及修改网页背景色和字体色的方法.分享给大家供大家参考,具体如下: 获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : 代码如下: 复制代码 代码如下: var rgb = document.getElementById('color').style.backgroundColor; 得到格式如下: rgb(225, 22, 23); 然后进行拆分: 代码如下
-
js获取元素下的第一级子元素的方法(推荐)
js childnodes获取的是所有的子元素,而我们实际要获取第一级子元素. function getChildren(obj){ var objChild = [] ; var objs = obj.getElementsByTagName('*'); for(var i=0,j=objs.length; i<j;++i){ if(objs[i].nodeType != 1){alert(objs[i].nodeType); continue ; } var temp = objs[i].p
-
js获取当前页的URL与window.location.href简单方法
利用JavaScript获取当前页的URL,这个问题起来好像很复杂,如果第一次去想这个问题,很多人估计又在琢磨到底又是哪个神一般的Javascript函数. 其实不是,Javascript获取当前页的URL的函数就是我们经常用来重定向的window.location.href. 比如如下函数: <script> var url=window.location.href; var loc = url.substring(url.lastIndexOf('/')+1, url.length); a
-
JS获取当前使用的浏览器名字以及版本号实现方法
工作中需要通过JS去获取当前使用的浏览器的名字以及版本号,网上大堆资料都有一个关键词是 navigator.appName,但是这个方法获取的浏览器的名字只有两种要么是IE要么就是Netscap,倒是可以用来判断是否使用了IE,但是我想获取具体的浏览器产品名字比如 Firefox,Chrome等.所以只好通过navigator.userAgent,但是这个字符串是非常长的,分析他的特征,通过正则表达式来解决这个问题是不错的方法. (1) 获取浏览器名字+版本字符串 function getBr
随机推荐
- GBK字符编码(字符集)缺陷导致web安全漏洞
- 深入理解golang的异常处理机制
- Linux下 mysql oracle 简单使用手册
- 浅析Java方法传值和传引用问题
- Android提高之MediaPlayer播放网络音频的实现方法
- string类的使用方法详解
- mysql数据库开发规范【推荐】
- php $_SERVER windows系统与linux系统下的区别说明
- python 字典(dict)遍历的四种方法性能测试报告
- python3批量删除豆瓣分组下的好友的实现代码
- 简要解读Ruby面向对象编程中的作用域
- SQL 复合查询条件(AND,OR,NOT)对NULL值的处理方法
- 判断一个对象是否为jquery对象的方法
- 详解handlebars+require基本使用方法
- Win2008 R2/2012 网络负载平衡NLB相关内容
- Java实例化类详解
- ES6概念 Symbol.keyFor()方法
- php文件操作之小型留言本实例
- 利用原生js实现html5小游戏之打砖块(附源码)
- vue学习教程之带你一步步详细解析vue-cli