代码描述:js元素设置 多个样式属性。js元素设置多个样式属性简单介绍
在实际应用中可能需要为页面元素设置样式属性。 通常样式属性是各方面的,比如边框、背景或者字体大小等等。 实现此效果的方式多种多样,下面就介绍一下比较常用的两种方式。 一.使用style.cssText属性:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("antzone"); odiv.style.cssText="color:blue;" +"text-align:center;" +"background-color:#ccc;" +"width:300px;" } </script> </head> <body> <div id="antzone">51前端</div> </body> </html>
这个属性非常的遍历,但是好像很多朋友更习惯于style.width="300px"这样的方式一条一条的设置。 二.使用className实现此效果:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style> .set{ color:blue; text-align:center; background-color:#ccc; width:300px; } </style> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("antzone"); odiv.className="set"; } </script> </head> <body> <div id="antzone">51前端</div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能