JS非行间样式获取函数的实例代码


Posted in Javascript onJune 05, 2018

行间样式:元素内部用style定义的样式,如:<div style="width:200px;"></div>

非行间样式:在<style></style>内通过css定义的样式

先看一段出问题的代码

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
  </head> 
  <style> 
    div{ 
      height: 100px; 
      width: 100px; 
      border: 2px solid black; 
      background: red; 
    } 
  </style> 
  <body> 
    <div id="div1" style=""> 
      宽 
    </div> 
  </body> 
  <script type="text/javascript" > 
    window.onload =function(){ 
      var oDiv1=document.getElementById('div1'); 
      oDiv1.onclick=function(){ 
        oDiv1.style.width=200+'px'; 
      } 
    } 
  </script> 
</html>

我在页面放了一个方块,红底黑边,想通过点击该方块让他的宽度变为200px,看一下结果——没有任何反应,也没有报错。

在事件中添加alert('a');有反应,说明onclick事件被触发了,那么就是

oDiv1.style.Width=200+'px';

这行代码有问题。

打印一下这个这个变量:

alert(oDiv1.style.Width);

虽然不报错,但是显示空白,即使用变量赋值之后任然无法获取这个值,真正的原因是style只能获取行间样式,试一下:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
  </head> 
  <style> 
     
  </style> 
  <body> 
    <div id="div1" style="height: 100px; 
      width: 100px; 
      border: 2px solid black; 
      background: red;"> 
      宽 
    </div> 
  </body> 
  <script type="text/javascript" > 
    window.onload =function(){ 
      var oDiv1=document.getElementById('div1'); 
      oDiv1.onclick=function(){ 
        oDiv1.style.width=200+'px'; 
      } 
    } 
  </script> 
</html>

可以确定确实是行间样式与非行间样式的问题,实际上不可能把所有样式都写在行间。

要解决这个问题,需要引入两个元素属性——currentStyle和getComputedStyle(obj, false)

currentStyle——获取非行间(当前样式)IE浏览器专属,chrome和FF不兼容。

getComputedStyle(obj, false)——获取非行间(计算后的样式)IE不兼容。

<script type="text/javascript" > 
  window.onload =function(){ 
    var oDiv1=document.getElementById('div1'); 
    oDiv1.onclick=function(){ 
            //FF、chrome 
            alert(getComputedStyle(oDiv1, false).width); 
            //IE 
            alert(oDiv1.currentStyle.width); 
    } 
  } 
</script>

把他封装一下写成一个公用函数:

//obj:哪个元素 
//attr:那个样式 
function getStyle(obj,attr){ 
  if(obj.currentStyle){ 
    //IE 
    return obj.currentStyel[attr]; 
  }else{ 
    //FF 
    return getComputedStyle(obj, false)[attr]; 
  } 
}

通过判断obj.currentStyle是否为真来判断当前浏览器为IE还是其他。

注意:.width的写法可以写成['width']

总结

以上所述是小编给大家介绍的JS非行间样式获取函数的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
js实现简易计算器功能
Oct 18 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 #Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 #Javascript
Vue项目中跨域问题解决方案
Jun 05 #Javascript
Vue多系统切换实现方案
Jun 05 #Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 #Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 #Javascript
You might like
967 个函式
2006/10/09 PHP
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
简单的js计算器实现
2016/10/26 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
浅谈python中的占位符
2017/11/09 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python程序变成软件的实操方法
2019/06/24 Python
python打印异常信息的两种实现方式
2019/12/24 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
数控技术学生的自我评价
2014/02/15 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
初中团委工作总结
2015/08/13 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL