生活随笔
收集整理的這篇文章主要介紹了
js改变style样式和css样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?? ? ? js可實現用戶對頁面中的選擇條件改變頁面中的樣式，頁面樣式可以通過style修飾，也可以通過css修飾，先來看一下js改變style樣式，代碼如下:
[html]?view plaincopy
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">?? <html>?? ??<head>?? ????<title>Change.html</title>?? ????<meta?http-equiv="content-type"?content="text/html;?charset=UTF-8">?? ?????? ?????? ??<script?language="javascript">?? ?????function?test4(event)?{?? ???????if(event.value?==?"黑色")?{?? ??????????//獲取div1?? ??????????var?div1?=?document.getElementById('div1');?? ??????????div1.style.backgroundColor="black";?? ???????}?? ???????if(event.value?==?"紅色")?{?? ??????????//獲取div1?? ??????????var?div1?=?document.getElementById('div1');?? ??????????div1.style.backgroundColor="red";?? ???????}?? ?????}?? ??</script>?? </head>?? <body>?? ??<div?id="div1"?style="width:400px;?height:300px;?background-color:red;">div1</div>?? ??<input?type="button"?value="黑色"?onclick="test4(this)"/>?? ??<input?type="button"?value="紅色"?onclick="test4(this)"/>?? ?? ??</body>?? </html>??
test4(this)代表當前的<input相當于把它看成一個對象。
再來看一下改變css樣式，代碼如下：
[html]?view plaincopy
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">?? <html>?? ??<head>?? ????<title>Change1.html</title>?? ????<meta?http-equiv="content-type"?content="text/html;?charset=UTF-8">?? ?????? ????<link?rel="stylesheet"?type="text/css"?href="css/Change.css">?? ??<script?language="javascript">?? ?????function?test4(event)?{?? ??????//獲取樣式表中所有class選擇器都獲得?? ??????var?ocssRules?=?document.styleSheets[0].rules;?? ??????//從ocssRules中取出你希望的class?? ??????var?style1?=?ocssRules[0];?? ??????if(event.value?==?"黑色")?{?? ??????????//window.alert(style1.style.backgroundColor);?? ?????????style1.style.backgroundColor="black";?? ??????}else?if(event.value?==?"紅色")?{?? ??????????style1.style.backgroundColor="red";?? ??????}?? ???????? ?????}?? ???</script>?? </head>?? <body>?? ??<div?id="div1"?class="style1">div1</div>?? ??<input?type="button"?value="黑色"?onclick="test4(this)"/>?? ??<input?type="button"?value="紅色"?onclick="test4(this)"/>?? ?? ??</body>?? </html>??
總結
以上是生活随笔為你收集整理的js改变style样式和css样式的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
