javascript實(shí)現(xiàn)電腦和手機(jī)版樣式切換
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)電腦和手機(jī)版樣式切換的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ list-style: none; } </style> </head> <body> <ul> <li>首頁(yè)</li> <li>公司概況</li> <li>產(chǎn)品介紹</li> <li>成功案例</li> <li>合作伙伴</li> </ul> <div> <button onclick="addStyle()">添加樣式效果</button> <button onclick="showStyle('pc')">電腦版</button> <button onclick="showStyle('mobile')">手機(jī)版</button> </div> <script> function addStyle() { //根據(jù)元素的標(biāo)記名獲取元素 var lis = document.getElementsByTagName('li'); for(var i = 0;i<lis.length;i++) { lis[i].style.width = '150px'; lis[i].style.height= '30px'; lis[i].style.padding = '5px 10px'; lis[i].style.marginTop = '1px'; lis[i].style.backgroundColor = 'rgb(51,51,51)'; lis[i].style.textAlign = 'center'; lis[i].style.lineHeight = '30px'; lis[i].style.color='#fff'; } } function showStyle(type) { var lis = document.getElementsByTagName('li'); for(var i = 0;i<lis.length;i++){ if(type == 'pc'){ //PC版 lis[i].style.float = 'left';//左浮動(dòng) //移除指定的屬性 lis[i].style.removeProperty('clear'); lis[i].style.width='150px'; }else{ //手機(jī)版 lis[i].style.clear = 'both';//清除浮動(dòng) lis[i].style.width='100%'; } } } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
TypeScript中正確使用interface和type的方法實(shí)例
在ts中定義類(lèi)型由兩種方式:接口(interface)和類(lèi)型別名(type alias),interface只能定義對(duì)象類(lèi)型,下面這篇文章主要給大家介紹了關(guān)于TypeScript中正確使用interface和type的相關(guān)資料,需要的朋友可以參考下2021-09-09微信小程序開(kāi)發(fā)打開(kāi)另一個(gè)小程序的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序開(kāi)發(fā)打開(kāi)另一個(gè)小程序的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05localStorage設(shè)置有效期和過(guò)期時(shí)間的簡(jiǎn)單方法
眾所周知前端三大緩存,cookie,sessionStorage,localStorage,下面這篇文章主要給大家介紹了關(guān)于localStorage設(shè)置有效期和過(guò)期時(shí)間的相關(guān)資料,需要的朋友可以參考下2022-02-02JavaScript ES6中const、let與var的對(duì)比詳解
這篇文章主要給大家介紹了在JavaScript中const、let與var對(duì)比的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起看看吧。2017-06-06javascript 取小數(shù)點(diǎn)后幾位幾種方法總結(jié)
這篇文章主要介紹了javascript 取小數(shù)點(diǎn)后幾位幾種方法總結(jié)的相關(guān)資料,這里提供了四種方法,幫助大家整理,需要的朋友可以參考下2017-08-08JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別
js中一般使用tofixed與round處理數(shù)據(jù)四舍五入,那么tofixed與round有什么區(qū)別呢?下面小編給大家分享JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別,需要的朋友參考下吧2017-10-10JS+CSS實(shí)現(xiàn)六級(jí)網(wǎng)站導(dǎo)航主菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)六級(jí)網(wǎng)站導(dǎo)航主菜單效果,涉及JavaScript遍歷頁(yè)面元素及動(dòng)態(tài)修改css屬性的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JavaScript插件化開(kāi)發(fā)教程 (一)
這篇文章主要介紹了JavaScript插件化開(kāi)發(fā)教程,十分的詳細(xì),2015-01-01利用threejs實(shí)現(xiàn)一個(gè)簡(jiǎn)易的泊車(chē)功能
這篇文章主要為大家詳細(xì)介紹了如何利用threejs實(shí)現(xiàn)一個(gè)簡(jiǎn)易的泊車(chē)功能,文中的示例代碼講解詳細(xì),對(duì)大家的學(xué)習(xí)和工作有一定的幫助,感興趣的小伙伴可以動(dòng)手嘗試一下2024-01-01