• style、currentStyle、getComputeStylel的使用


    (1)js中使用obj.style的用法,是为了获得内联样式,即style属性中的值。

    如果想获取obj.style.display,但内联样式表中没有定义display,那么将返回一个空的字符串。

    (2)使用obj.currentStyle则是为了获得外部(即通过<link>引入)和内部(即<style>中定义)的样式表中的值。

    currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:内嵌样式、样式表规则、HTML 标签属性、HTML 标签的内部定义。

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style type="text/css">
     7             #text{
     8                 width: 200px;
     9                 height: 30px;
    10             }
    11         </style> 
    12         <script type="text/javascript">
    13             function objClick(obj){
    14                 alert(obj.style.width);
    15                 alert(obj.currentStyle.height);
    16             }
    17         </script>
    18     </head>
    19     <body>
    20         <div>
    21             <input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">
    22         </div>
    23     </body>
    24 </html>

    注意:只有 IE 和 Opera 支持使用 currentStyle 获取 HTMLElement 的计算后的样式,其他浏览器中不支持。ps:由于忽略了这个条件,一直在chrome下调试,怎么都不起作用,所以浏览器的兼容性,一定要切记。

    (3)window.getComputedStyle(obj,null)
    Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表,以数组形式返回,并且是readonly的。
    参数说明:
    第一个参数为要获取计算后的样式的目标元素
    第二个参数为期望的伪元素,如 ':after',':first-letter' 等,而不是伪类如 ':hover' 等。
    注意:在 Firefox 中,第二个参数是必须的,如果没有期望的伪元素要设置为 'null',这与规范的要求相符。在 Chrome Safari Opera 中,第二个参数如果为 'null' 则可以省略。
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style type="text/css">
     7             #text{
     8                 width: 200px;
     9                 height: 30px;
    10             }
    11         </style> 
    12         <script type="text/javascript">
    13             function objClick(obj){
    14                           alert(window.getComputedStyle(obj,null).getPropertyValue("width"));
    15                           alert(window.getComputedStyle(obj,null).getPropertyCSSValue("width").cssText);
    16                }
    17         </script>
    18     </head>
    19     <body>
    20         <div>
    21             <input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">
    22         </div>
    23     </body>
    24 </html>

     经测试:第一种方法,在IE和chrome中通用,第二种,IE下不支持。

  • 相关阅读:
    [CSP-S模拟测试]:F(DP+线段树)
    [CSP-S模拟测试]:E(贪心)
    [CSP-S模拟测试]:D(暴力+剪枝)
    [CSP-S模拟测试]:C(三分+贪心)
    [CSP-S模拟测试]:B(DP+数学)
    [CSP-S模拟测试]:A(数学)
    [CSP-S模拟测试]:密码(数位DP+库默尔定理)
    BZOJ3456 城市规划 【多项式求逆】
    多项式求逆
    uoj185 [ZJOI2016]小星星 【dp + 容斥】
  • 原文地址:https://www.cnblogs.com/lonelybonze/p/3963938.html
Copyright © 2020-2023  润新知