SoFunction
Updated on 2025-03-09

Methods for obtaining and modifying CSS styles in native JS

This article describes the method of obtaining and modifying CSS styles in native JS implementation. Share it for your reference, as follows:

Everyone knows that getting the style of elements in JavaScript native operations is a more frequent thing when using it. Here I will introduce the method of getting the CSS style. I hope it can help some people in need. If you are lucky enough to be seen by the big giant, there is a better way. Welcome to propose it! ! !

1. Get the element style in the line:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jsGet external styles</title>
</head>
<body>
  <div  style="width:200px;height:200px;border:3px solid cyan;"></div>
</body>
<script>
  //Get the line style  var div = ('div');
  var width = ;
  alert(width);//200px
</script>
</html>

In JS code, alert will pop up the width of the div element to 200px; it achieves the purpose of getting the element width, but this simple method is only suitable for getting the element's in-line element styles, and cannot get the internal and external styles. In the project, writing in-line elements is not recognized by everyone, so this method is just for everyone to understand.

2. Obtain non-line style elements:

If the element style is not an inter-line style, using the above method cannot obtain the element's style, another method needs to be used:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jsGet internal styles</title>
  <style>
    #div{
      width: 200px;
      height: 200px;
      border:3px solid cyan;
    }
  </style>
</head>
<body>
  <div "></div>
</body>
<script>
  var div = ('div');
  //Get the width of the div  var width = (div,null).width;
  alert(width);//200px
  //Modify the width of the div  ='width:300px;'
</script>
</html>

In the above code,('element',null).'style', Compatibility of this method: Firefox Google IE9 obtained is the calculated style, but it should be noted here that the value obtained using this method is read-only mode and cannot be modified, so it is usedThe method has changed its attributes, so you need to pay attention to the writing method here.

3. Compatibility:

The previous unspoken rules, nothing good is universal. Yes, you guessed it, willful IE cannot use the above methods, but IE has its own methodscurrentStyle, The usage is the same, so I won't repeat it. Let's write the code that has been processed and compatible as follows:

var div = ('div');
if () {
  ();
}else{
(getComputedStyle(div,null).width);
}

Method encapsulation:

function getStyle(obj,name){
  if () {
    return [name];
  }else{
    return getComputedStyle(obj,false)[name];
  }
}

Friends who are interested in the above code can use itOnline HTML/CSS/JavaScript code running toolhttp://tools./code/HtmlJsRunRun the test and see how it works.

For more information about JavaScript, readers who are interested in reading this site's special topic:A complete collection of operations and techniques related to JavaScript events》、《Summary of JavaScript page element operation skills》、《Summary of JavaScript DOM skills》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.