原生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 相关文章推荐
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
Internet主要有哪些网络群组成
2015/12/24 面试题
施工安全协议书
2013/12/11 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
公司门卫岗位职责
2014/03/15 职场文书
工程质量承诺书
2014/03/27 职场文书
单位委托书范本
2014/04/04 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
单位委托书格式范本
2014/09/29 职场文书
运动会通讯稿600字
2015/07/20 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python