zoukankan      html  css  js  c++  java
  • JavaScript 学习—— js获取行间样式和非行间样式

    1. 问题引入

    <head>
    <style>
        #div1{
            150px;
            height:200px;
            position:absolute;
            left:-150px;
            background: green;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById('div1');
            alert(oDiv1.style.left); //获取left属性的值
        }
    </script>
    </head>
    
    <body>
    <div id="div1"></div>
    </body>

    上面代码的意思是想要获取得到id="div1"元素的left属性值。但是当我们运行上面代码的时候就会发现,弹窗弹出的内容确实什么都没有。

    我们明明在<style></style>标签内定义了该元素的left属性,为什么alert(oDiv.style.left);确实返回一个什么都没有的弹窗呢?

    其实,这个问题的原因是:oDiv1.style.left这样的格式来获取的left是非行间样式的left。

    2. 什么是非行间样式?

    非行间样式就是指不是写在标签体内的style属性的样式。如上面的代码中<style>....</style>内的定义的样式都是非行间样式。

    3. 那什么是行间样式?

    行间样式就是写在标签体内的样式:如,<div style="left:100px">,在这里left样式就是行间样式。

    4. 那我们该如何获取行间样式呢?

    要获取行间样式我们可以这样操作:

    低版本ie浏览器下使用oDiv1.currentStyle.left;进行获取非行间样式。

    其它浏览器下使用var style = window.getComputedStyle(oDiv1,null);  //第二个参数直接传入null就行,没什么作用的。

              alert(style.left); //便可以返回行间样式的left属性值

    5. 整合在一起,兼容所有浏览器的代码:

     window.onload = function(){
            var oDiv1 = document.getElementById('div1');
            if(oDiv1.currentStyle){
                alert(oDiv1.currentStyle.left);
            }else{
                alert(getComputedStyle(oDiv1,null).left);
            }
        }
  • 相关阅读:
    迭代器设计模式
    python中的turtle库绘制图形
    Tesseract-OCR4.0识别中文与训练字库实例
    java图片处理
    Tess4J OCR简单使用教程
    C++ 排列最优解算法思想
    Swing使用JavaFXweb组件
    java专业术语
    java的分数类
    System Rules 更好的测试
  • 原文地址:https://www.cnblogs.com/JamKong/p/4967815.html
Copyright © 2011-2022 走看看