Differences and connections between JavaScript--currentStyle and getComputedStyle()

Both currentStyle and getComputedStyle() in JavaScript are methods used to get the computed style property of an element, but they are suitable for different situations. They are explained below:

1. currentStyle: This attribute is unique to IE browser and can only be used in IE browser. It is used to get the current style of the specified element and returns a style attribute object.
Example usage:

const element = document.getElementById('myElement');
const currentStyle = element.currentStyle;

// 获取背景颜色
const backgroundColor = currentStyle.backgroundColor;
console.log(backgroundColor);

2. getComputedStyle(): This method can get the computed style of the specified element, which is applicable to most modern browsers (including Chrome, Firefox, Safari, etc.). It also returns a style attribute object.
Example usage:

const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element);

// 获取背景颜色
const backgroundColor = computedStyle.backgroundColor;
console.log(backgroundColor);

It should be noted that both currentStyle and the style value returned by getComputedStyle() are in the form of strings. If you need to obtain specific values, you can use related methods to convert them (for example, parseInt()).

Therefore, we can write a method for reading element styles that adapts to each browser.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>适配浏览器的元素样式读取方法</title>
  <style>
    .example {
      width: 200px;
      height: 100px;
      background-color: red;
      color: white;
      font-size: 20px;
      padding: 10px;
      margin: 20px;
    }
  </style>
  <script>
    // 元素样式读取方法
    function getElementStyle(element, styleProperty) {
      if (element.currentStyle) { // IE浏览器
        return element.currentStyle[styleProperty];
      } else if (window.getComputedStyle) { // 标准浏览器
        return window.getComputedStyle(element)[styleProperty];
      }
    }

    // 示例用法
    window.onload = function() {
      var exampleElement = document.getElementById('example');
      var width = getElementStyle(exampleElement, 'width');
      var fontSize = getElementStyle(exampleElement, 'fontSize');

      console.log("宽度: " + width);
      console.log("字体大小: " + fontSize);
    };
  </script>
</head>
<body>
  <div id="example" class="example">示例元素</div>
</body>
</html>

In this example, we define a function called getElementStyle. This function accepts two parameters: element represents the element whose style is to be obtained, and styleProperty represents the style attribute to be obtained.
The getElementStyle function first determines whether the browser supports the currentStyle attribute, and if so, uses element.currentStyle[styleProperty] to obtain the element's style value.
If the browser does not support the currentStyle attribute, judge whether it supports the getComputedStyle method, and if so, use window.getComputedStyle(element)[styleProperty] to obtain the style value of the element.
In the sample code, we use the getElementStyle function to get the width and font size of the sample element, and print the result to the console. You can modify and extend this example as needed to accommodate different browsers and style properties.

Differences and connections between JavaScript--currentStyle and getComputedStyle()

Guess you like