js改變style樣式和css樣式的簡(jiǎn)單實(shí)例
js可實(shí)現(xiàn)用戶對(duì)頁(yè)面中的選擇條件改變頁(yè)面中的樣式,頁(yè)面樣式可以通過(guò)style修飾,也可以通過(guò)css修飾,先來(lái)看一下js改變style樣式,代碼如下:
<!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"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <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)代表當(dāng)前的<input相當(dāng)于把它看成一個(gè)對(duì)象。
再來(lái)看一下改變css樣式,代碼如下:
<!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>
以上就是小編為大家?guī)?lái)的js改變style樣式和css樣式的簡(jiǎn)單實(shí)例全部?jī)?nèi)容了,希望大家多多支持腳本之家~
- javascript 動(dòng)態(tài)修改css樣式方法匯總(四種方法)
- JavaScript修改css樣式style
- JS修改css樣式style淺談
- JS函數(shù)實(shí)現(xiàn)動(dòng)態(tài)添加CSS樣式表文件
- JS獲取CSS樣式(style/getComputedStyle/currentStyle)
- 原生js更改css樣式的兩種方式
- js改變css樣式的三種方法推薦
- JavaScript修改css樣式style動(dòng)態(tài)改變?cè)貥邮?/a>
- JS判斷移動(dòng)端訪問(wèn)設(shè)備并加載對(duì)應(yīng)CSS樣式
- JS讀寫(xiě)CSS樣式的方法匯總
- 原生JS實(shí)現(xiàn)獲取及修改CSS樣式的方法
相關(guān)文章
javascript實(shí)現(xiàn)簡(jiǎn)約的頁(yè)面右下角點(diǎn)擊彈出窗口示例【測(cè)試可用】
這篇文章主要介紹了javascript實(shí)現(xiàn)的頁(yè)面右下角點(diǎn)擊彈出窗口功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript頁(yè)面右下角點(diǎn)擊彈出窗口功能的相關(guān)步驟、原理與注意事項(xiàng),需要的朋友可以參考下2023-07-07用xhtml+css寫(xiě)的相冊(cè)自適應(yīng) - 類(lèi)似九宮格[兼容 ff ie6 ie7 opear ]
用xhtml+css寫(xiě)的相冊(cè)自適應(yīng) - 類(lèi)似九宮格[兼容 ff ie6 ie7 opear ]...2007-05-05使用Webpack構(gòu)建多頁(yè)面程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了使用Webpack構(gòu)建多頁(yè)面程序的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03一文教會(huì)你微信小程序如何實(shí)現(xiàn)登錄
微信小程序頁(yè)面畫(huà)好后,需要開(kāi)始做一系列和用戶的交互功能了,首先就是登錄,這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)登錄的相關(guān)資料,需要的朋友可以參考下2022-07-07javascript實(shí)現(xiàn)頁(yè)面刷新時(shí)自動(dòng)清空表單并選中的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)頁(yè)面刷新時(shí)自動(dòng)清空表單并選中的方法,涉及javascript中reset與focus方法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07