zoukankan      html  css  js  c++  java
  • javaScript系列---【操作元素样式】

    操作元素样式

    原则:用过style属性操作的都是元素的行内样式(设置和获取)

    操作单个样式

    • 基本语法

      设置 :

      元素.style.样式属性 = 

      获取:

       元素.style.样式属性

      代码如下:

      var box =document.getElementById("box");

      // 设置
      box.style.width = "400px";
      box.style.height = "400px";
      // js中全部遵循驼峰命名法
      box.style.fontSize = "22px";
      box.style.backgroundColor = "blue";

      // 多次设置当前这个属性 后边的覆盖前边的
      box.style.width = "600px";

      // 获取
      // 行内有才能获取到,没有获取到的是空字符串
      console.log(box.style.width);
      console.log(box.style.height);
      console.log(box.style.fontSize);
      console.log(box.style.backgroundColor);

    操作样式集合

    • 注意:会把style对应的值整体覆盖了

    • 基本语法:

      设置:

      元素.style.cssText = "行内样式值"
      //cssText ->符合CSS写法

      获取:

      元素.style.cssTex; 
      //将行内style属性对应的值整体获取到 (符合CSS写法)

      代码如下:

      var box = document.getElementById("box");

      // 设置
      // 会把style对应的值整体覆盖了
      box.style.cssText = "200px;height:200px;
      // box.style.cssText = "font-size:60px";
      // box.style.cssText = "200px";

      // 获取
      console.log(box.style.cssText);

       

    •  

  • 相关阅读:
    使用_Capistrano_进行自动化部署(2)
    使用 Capistrano 进行自动化部署
    Zend_Framework_1 框架是如何被启动的?
    PHP新版本变化
    Phpstorm 无法自动断点 Exception
    理解希尔排序
    C# Thread 线程
    Unity 依赖注入容器的AOP扩展
    C# 面向切面编程 AOP
    C# 表达式树 Expression
  • 原文地址:https://www.cnblogs.com/chenhaiyun/p/14520664.html
Copyright © 2011-2022 走看看