SoFunction
Updated on 2025-04-03

Summary of nine ways to modify element styles by js

1. Directly set the properties of style

The style attribute can set or return the inline style of an element. For changing the same style of the same element, the priority of setting the style attribute is higher.

  • Syntax: = value
  • property is the CSS property name, such as: color, margin. If the attribute name originally contains "-", it needs to be converted to a small camel form, such as backgroundColor, marginLeft.
var box = ('div')
 = "#fff" // Set the element Chinese text to white = "100px" // Set the left margin of the element to 100px

In some cases, this setting is invalid.

If the attribute has a '-' number, it is written as the camel form (such as textAlign). If you want to retain the - number, it is the form of brackets.

 = '100px';

2. Set properties directly

Only used for certain attributes, related styles will be automatically recognized

('height', 100);
('height', '100px');

3. Set the properties of style

('style', 'height: 100px !important');

4. Use setProperty

  • If you want to set !important, it is recommended to set the third parameter in this way
('height', '300px', 'important');

5. Change class (recommended)

  • Dynamically change the style of the pseudo-element by changing the class of the pseudo-element parent
 = 'blue';
 += 'blue fb';

6. Set cssText

 = 'height: 100px !important';
 += 'height: 100px !important';

7. Introduce css style files

  • Create and introduce new css style files
 function addNewStyle(newStyle) {
            var styleElement = ('styles_js');

<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>styleElement<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> styleElement <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;style&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> styleElement<span class="token punctuation">.</span>type <span class="token operator">&#61;</span> <span class="token string">&#39;text/css&#39;</span><span class="token punctuation">;</span> styleElement<span class="token punctuation">.</span>id <span class="token operator">&#61;</span> <span class="token string">&#39;styles_js&#39;</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&#39;head&#39;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>styleElement<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> styleElement<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>newStyle<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">addNewStyle</span><span class="token punctuation">(</span><span class="token string">&#39;.box {height: 100px !important;}&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

8. Use addRule and insertRule

//Operate in the original style        [0].addRule('.box', 'height: 100px');
        [0].insertRule('.box {height: 100px}', 0);

&lt;span class="token comment"&gt;// Or when inserting a new style&lt;/span&gt; &lt;span class="token keyword"&gt;var&lt;/span&gt; styleEl &lt;span class="token operator"&gt;&amp;#61;&lt;/span&gt; document&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;createElement&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;&amp;#39;style&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; styleSheet &lt;span class="token operator"&gt;&amp;#61;&lt;/span&gt; styleEl&lt;span class="token punctuation"&gt;.&lt;/span&gt;sheet&lt;span class="token punctuation"&gt;;&lt;/span&gt; styleSheet&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;addRule&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;&amp;#39;.box&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token string"&gt;&amp;#39;height: 100px&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt; styleSheet&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;insertRule&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;&amp;#39;.box {height: 100px}&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token number"&gt;0&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt; document&lt;span class="token punctuation"&gt;.&lt;/span&gt;head&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;appendChild&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;styleEl&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;

9. Control styles through classList

  • The classList attribute returns a collection of element class attributes (which can be simply understood as a collection of class names here). By using the methods in classList, you can easily access and control the element class name to achieve the purpose of controlling the style

Common methods of classList:

name describe
add(class1, class2, …) Add one or more class names
remove(class1, class2, …) Remove one or more class names
replace(oldClass, newClass) Replace class name
contains(class) Determine whether the class name exists and return a boolean value
toggle(class, true|false) If the class name exists, remove it, otherwise add it, the second parameter means that it is forced to add (true) or delete (false） 
&lt;div class="box"&gt;classList test&lt;/div&gt;
&lt;script&gt;
  var box = ('.box')
  ('box1', 'box2')    // [box] =&gt; [box, box1, box2]
  ('box1', 'box2') // [box, box1, box2] =&gt; [box]
  ('box', 'box2')  // [box] =&gt; [box2]
  ('box1')  // The current element does not contain the class name box1, returns false  ('active')   // [box2] =&gt; [box2, active]
&lt;/script&gt;

Summarize

This is the end of this article about nine ways to modify element styles by js. For more related content on modifying element styles by js, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!