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 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 Javascript
JS中如何优雅的使用async await详解
Oct 05 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
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP7新功能总结
2019/04/14 PHP
javascript add event remove event
2008/04/07 Javascript
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python 类的继承实例详解
2017/03/25 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
python绘制汉诺塔
2021/03/01 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
机电一体化毕业生求职信
2013/11/02 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
2014年度个人工作总结
2014/11/07 职场文书
2015元旦节寄语
2014/12/08 职场文书
爱护环境建议书
2015/09/14 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
Python实现滑雪小游戏
2021/09/25 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis