Rumah  >  Artikel  >  hujung hadapan web  >  js怎么设置元素css样式

js怎么设置元素css样式

青灯夜游
青灯夜游asal
2021-04-29 17:38:345069semak imbas

设置方法:1、使用“对象.setAttribute('style', '属性:值')”语句;2、使用“对象.style.setProperty('属性', '值')”语句;3、使用“对象.style.cssText='属性:值'”语句。

js怎么设置元素css样式

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

方法1:使用setAttribute()

<p id="p">hello world<p>

<button onclick="myFunction()">点击按钮,设置css样式</button>

<script>
function myFunction() {
	document.getElementById("p").setAttribute(&#39;style&#39;, &#39;color:#FF0000&#39;);
}
</script>

效果图:

1.gif

方法2:使用setProperty()

<p id="p">hello world<p>

<button onclick="myFunction()">点击按钮,设置css样式</button>

<script>
function myFunction() {
	document.getElementById("p").style.setProperty(&#39;font-size&#39;, &#39;50px&#39;);
}
</script>

效果图:

2.gif

方法3:cssText属性

<p id="p">hello world<p>

<button onclick="myFunction()">点击按钮,设置css样式</button>

<script>
function myFunction() {
	document.getElementById("p").style.cssText=&#39;font-size:50px;color: red;&#39;;
}
</script>

效果图:

3.gif

【推荐学习:javascript高级教程

Atas ialah kandungan terperinci js怎么设置元素css样式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn