原生JS实现获取及修改CSS样式的方法


Posted in Javascript onSeptember 04, 2018

本文实例讲述了原生JS实现获取及修改CSS样式的方法。分享给大家供大家参考,具体如下:

大家都知道在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];
  }
}

上述代码感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试运行一下,看看运行结果如何。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 #Javascript
mpvue写一个CPASS小程序的示例
Sep 04 #Javascript
Vue表单及表单绑定方法
Sep 04 #Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 #Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 #Javascript
基于element-ui的rules中正则表达式
Sep 04 #Javascript
You might like
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
javascript闭包的理解
2015/04/01 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
js实现分页功能
2017/05/24 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
JS实现手风琴特效
2020/11/08 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
Python打印输出数组中全部元素
2018/03/13 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python 三元运算符使用解析
2019/09/16 Python
python常用数据重复项处理方法
2019/11/22 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
追悼会上的答谢词
2014/01/10 职场文书
中青班党性分析材料
2014/02/16 职场文书
党员自我剖析材料
2014/08/31 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
初中政治教师教学反思
2016/02/23 职场文书