Home >Web Front-end >CSS Tutorial >How js changes css style

How js changes css style

coldplay.xixiOriginal: 2021-04-16 14:52:464418browse

How to change the css style in js: 1. Use the cssText method; 2. Use the [setProperty()] method; 3. Use the style attribute corresponding to the css attribute.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

JS method to change css style:

The first one: use cssText

div.style.cssText=&#39;width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;&#39;;

The second one : Use setProperty()

 div.style.setProperty(&#39;width&#39;,&#39;700px&#39;);
 div.style.setProperty(&#39;height&#39;,&#39;300px&#39;);
 div.style.setProperty(&#39;line-height&#39;,&#39;300px&#39;);
 div.style.setProperty(&#39;background&#39;,&#39;#f00&#39;);
 div.style.setProperty(&#39;color&#39;,&#39;#fff&#39;);
 div.style.setProperty(&#39;border&#39;,&#39;1px solid blue&#39;);
 div.style.setProperty(&#39;text-align&#39;,&#39;center&#39;);

Third method: Use the style attribute corresponding to the css attribute

 div.style.width = "800px";
 div.style.height = "250px"; 
 div.style.lineHeight = "250px"; 
 div.style.background = "#000";
 div.style.color = "#fff";
 div.style.border = "1px solid #111";
 div.style.textAlign = "center";


        这是一个盒子

Recommended related tutorials:CSS Video Tutorial

The above is the detailed content of How js changes css style. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to modify css in jsNext article：How to modify css in js

See more

How js changes css style

Related articles