zoukankan      html  css  js  c++  java
  • JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式

      版权声明:未经授权,严禁转载分享!  


     元素的样式

      HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象。

      Style 属性中的 CSS 样式属性,都是 style 对象的属性。

      可通过 . 运算符获取和设置样式属性的值。

       获取或设置元素的内联样式:

        - 获取:elem.style.属性名

        - 设置:elem.style.属性名 = "值"

      

      去横线变驼峰!

      获取到的和要设置的都是字符串类型。

    案例代码

        <h2 id="t1" style="300px;line-height:40px;">标题一</h2>
    
        <script>
        var t1=document.getElementById("t1");
        // console.log(t1.style);
    
        //获取
        console.log(t1.style.width);
        console.log(t1.style.lineHeight);//去横线变驼峰
    
        //设置
        t1.style.width="50%";
        t1.style.height="100px";</script>

     JS 还可以获得最终影响到当前元素的所有样式 —— 计算后的样式

      方式:

        - 获得计算后的样式对象:var style = getComputedStyle(elem);

        - 从 style 对象中提取想要的 css 属性值:var fontSize = style.fontSize;

      计算后的样式为绝对单位值。

      计算后的样式都是只读的,不可以修改!

     案例代码

     //获得计算后的样式
        var style=getComputedStyle(t1);
        // console.log(style);
        console.log(style.color);
        console.log(style.fontSize);
        console.log(style.width);
        console.log(style.border);
        console.log(style.borderTop);
        console.log(style.borderTopWidth);

    结束,越来越糊弄了~ 

  • 相关阅读:
    XML 使用例子(转)
    [转载]网游数据解释
    [转载]游戏引擎列表
    (转)XML 使用
    LuaPlus新手使用方法(转)
    [转载]很有参考意义的显卡性能排行榜
    (转)LuaPlus子表遍历
    (转)LuaPlus集成Lua脚本
    HTML5尝鲜(1):使用aduio标签打造音乐播放器
    oracle的rollup
  • 原文地址:https://www.cnblogs.com/wjw1014/p/8999503.html
Copyright © 2011-2022 走看看