原生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 相关文章推荐
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
vue微信分享插件使用方法详解
Feb 18 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
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php 注释规范
2012/03/29 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
php动态绑定变量的用法
2015/06/16 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
详解node中创建服务进程
2017/05/09 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
如何利用python查找电脑文件
2018/04/27 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
公证书标准格式
2014/04/10 职场文书
家长写给孩子的评语
2014/04/18 职场文书
工程售后服务承诺书
2014/05/21 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
行政介绍信范文
2015/05/04 职场文书
孟佩杰观后感
2015/06/17 职场文书
法人身份证明书
2015/06/18 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
教师培训学习心得体会
2016/01/21 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
Python时间操作之pytz模块使用详解
2022/06/14 Python