原生JS获取HTML样式并修改
大家都知道在JavaScript原生操作中获取元素的样式，在实际操作是使用时比较频繁的一件事，这里像大家介绍下获取css样式的方法，希望可以帮助一些需要的人，如果有幸被大牛看到，有更好的办法，欢迎提出！！！
一、 行内元素样式获取：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js获取外部样式</title>
</head>
<body>
<div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div>
</body>
<script>
//获取行间样式
var div = document.getElementById('div');
var width = div.style.width;
alert(width);//200px
</script>
</html>
在JS代码中，alert会弹出div元素的width为200px；达到了要获取元素宽度的目的，但是这种简单的方法只适用于获取元素的行内元素样式，并不能获取内部样式和外部样式，在项目中，写入行内元素这种方案并不被大家认同，所以这种方法，只是让大家了解下。
二、 非行间样式元素获取：
如果元素样式并非行间样式，利用上面这种方法并不能获取到元素的样式，需要使用另一种方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js获取内部部样式</title>
<style>
#div{
width: 200px;
height: 200px;
border:3px solid cyan;
}
</style>
</head>
<body>
<div id="div""></div>
</body>
<script>
var div = document.getElementById('div');
//获取div的width
var width = window.getComputedStyle(div,null).width;
alert(width);//200px
//修改div的width
div.style.cssText='width:300px;'
</script>
</html>
在上面代码中，使用了window.getComputedStyle('元素',null).'样式',此方法兼容性:火狐 谷歌 IE9 获取的为计算后的样式,但是这里需要注意的是用此方法获取的值为只读模式,并不能修改,所以用了style.cssText方式修改了其属性,这里需要注意下书写方式.
三 、兼容性:
前段潜规则,凡是好的东西都不能通用,是的,你猜对了,任性的IE并不能使用以上方法,但是IE有自己的方法为currentStyle,用法一样,就不再赘述了,下面直接写出已经处理兼容的代码如下:
var div = document.getElementById('div');
if (div.currentStyle) {
console.log(div.currentStyle.width);
}else{
console.log(getComputedStyle(div,null).width);
}
方法封装:
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
原生JS获取HTML样式并修改的更多相关文章
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- 原生js获取display属性注意事项
原生js获取diaplay属性需要在标签上写行间样式style='display:none/block;' <div style="display:block;">&l ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- js实现class样式的修改、添加及删除的方法
本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: <t ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
随机推荐
- iOS开发——绘图电池按百分比显示
1.在DrawLine.h文件中提供了一个改变电池电量数值的接口 // // DrawLine.h // Demo-draw2 // // Created by yyt on 16/5/11. ...
- Android之Margin和Padding属性及支持的长度单位
做了个小软件后,终于把Margin和Padding弄清楚了,现总结如下: Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin ...
- 左偏树初步 bzoj2809 & bzoj4003
看着百度文库学习了一个. 总的来说,左偏树这个可并堆满足 堆的性质 和 左偏 性质. bzoj2809: [Apio2012]dispatching 把每个忍者先放到节点上,然后从下往上合并,假设到了 ...
- Java 之 反射
1.反射 a.意义:允许运行中的Java程序对自身进行检查,或者说"自审",并能直接操作程序的内部属性 b.概括:运行时探究和使用编译时未知的类 c.反射的核心原理: ①JVM在加 ...
- 使用getParameterMap()方法实现对请求参数的封装的工具类
我们知道,HttpServletRequest这个类的getParameter(name),getParameterValues(name)可以分别实现对页面传来的单个参数和对多个同名参数的接受.特别 ...
- JS 中 Class - 类创建
Class - 类创建 Class类实现了在JavaScript中声明一个新的类, 并通过构造函数实例化这个类的机制.通过使用Class.create()方法, 你实际上声明了一个新的类, 并定义了一 ...
- 1.1.2.托管对象模型（Core Data 应用程序实践指南）
托管对象模型即对象图,可以看成实体类的描述,规定了数据字段. 要想创建托管对象模型,需生成NSManagedObjectModel类的实例.
- 定制jackson的自定义序列化(null值的处理)
http://www.cnblogs.com/lic309/p/5048631.html
- 用js来实现页面的换肤功能(带cookie记忆)
用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...
- JS base64 加密和解密
/*** * 加密 base64encode(utf16to8(str)) * 解密 utf8to16(base64decode(str)) * * */ var base64EncodeChars ...