首页 > 代码库 > 设置和获取样式

设置和获取样式

2024-09-03 16:31:40   218人阅读

1.设置样式,利用元素的style属性设置

<body>
 <div class="box" id="box">
   334234234
 </div>
 <script>
   var box = document.getElementById("box");
   console.log(box.style) //  CSSStyleDeclaration对象
   console.log(box.style.padding) // "",只要没有设置相应的行内样式,默认值都是""
   box.style.padding = "300px"; // 设置样式
   box.style.backgroundColor = "#f69"; // 设置背景色(驼峰式)
   console.log(box.style) 
   console.log(box.style.padding) // "300px"
 </script>
</body>

2.读取样式:style  ,  window.getComputedStyle   ,   window.currentStyle

1) style属性的确是可读写的,但是读取时,只限制行内样式,即 < p style="width:200px">,只能获得这里行内的样式width,其他属性均为"",所以xx.style一般用来设置样式,而不是读取样式

2) window.getComputedStyle(element,[pseudoElt]),得出所有在应用有效的样式和分解任何可能会包含值的基础计算后的元素的CSS属性值,返回的样式是一个CSSStyleDeclaration 对象。(只读属性)

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .box{
    width: 100px;
    height: 100px;
    background-color: #f69;
　　opacity:0.8;
  }
  </style>
</head>

<body>
 <div class="box" id="box">
   334234234
 </div>
 <script>
   var box = document.getElementById("box");
  console.log(window.getComputedStyle(box, null)); // CSSStyleDeclaration对象
  console.log(box.style); // CSSStyleDeclaration对象
  console.log(window.getComputedStyle(box, null).width); // "100px"
  console.log(box.style.width); // ""
  // window.getComputedStyle(box, null).width = "900px" // 报错
 </script>
</body>

</html>

 

3.特别不情愿说IE6-8,不支持window.getComputedStyle,而是element.currentStyle

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #f69;
  }
  </style>
</head>

<body>
  <div class="box" id="box">
    334234234
  </div>
  <script>
  var box = document.getElementById("box");
  try {
    console.log(window.getComputedStyle(box, null)); // CSSStyleDeclaration对象 
    console.log(box.style); // CSSStyleDeclaration对象
    console.log(window.getComputedStyle(box, null).width); // "100px" 
    console.log(box.style.width); // "" 
    // window.getComputedStyle(box, null).width = "900px" // 报错
  } catch (e) {
    // ie6-8会执行这里的
    console.log(e) // TypeError: 对象不支持“getComputedStyle”属性或方法 
    console.log(box.currentStyle) // CSSCurrentStyleDeclaration对象
    console.log(box.currentStyle.width) // 100px
  }
  </script>
</body>

</html>

综上,

设置样式值用ele.style.key = value

读取样式值,在IE6-8中用 ele.currentStyle.key,其他浏览器用 window.getComputedStyle(ele,null).key (第二个参数可以用伪类,":hover/ :before/ :after/ :nth-child等",但一般情况就是null)

 以下是获得css值的方法,opacity兼容ie6-8,且如果返回的结果有单位的话,不显示单位

function getCss(curEle, attr) {
    var val = null, reg = null;
    if ("getComputedStyle" in window) {
      val = window.getComputedStyle(curEle, null)[attr];
    } else { // ie6-8
      if (attr === "opacity") {
        val = curEle.currentStyle[filter]; // filter:alpha(opacity=10) 把获取到的结果进行剖析,获得里面的数字 让数字除以100才和标准浏览器一致
        reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
        val = reg.test(val) ? reg.exec(val)[1] / 100 : 1
      } else {
        val = curEle.currentStyle[attr];
      }
    }
    reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
    return reg.test(val) ? parseFloat(val) : val;
  }
  console.log(getCss(box, "opacity"))

 

设置和获取样式


联系
我们