【JS新手教程】JS修改css樣式的幾種方法


本文試驗了幾種JS修改css樣式的方法,
方法1:元素.style.樣式=樣式值。
方法2:元素.style.cssText=樣式:樣式值
方法3:元素.style[樣式]=樣式值

.cssText這種,可以用一行改變本元素多個樣式,直接后面寫很多css樣式。
.style.樣式,這種,逐個樣式進行修改。
如果樣式有-短線,如background-color,可以用方法3,style跟着樣式加中括號。

測試代碼:

<style>#D1{background-color:#fcfe3f;padding:50px;margin:11px;border:10px solid blue;width:200px;}</style>
</head>
<body>
<input type="radio" id="r1" name="s" onclick="YB()" checked>黃藍(默認)
<input type="radio" id="r2" name="s" onclick="PR()">粉紅
<input type="radio" id="r3" name="s" onclick="GY()">綠黃
<br>
<div id="D1">文字</div>
<script language="javascript" type="text/javascript">   
 function YB(){
     document.getElementById("D1").style.background="#fcfe3f";
     document.getElementById("D1").style.border="10px solid blue";
 };
 function PR(){
     document.getElementById("D1").style.cssText="background:#e87ca2;border:10px solid red";
 };
  function GY(){
     document.getElementById("D1").style['background-color']="#84d192";//帶-號的css樣式用這個格式
     document.getElementById("D1").style['border']="10px solid #fcfe3f";
 };
</script> 

圖示:點擊單選框,選擇不同的背景色和邊框色。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM