javascript實現(xiàn)電腦和手機(jī)版樣式切換
更新時間：2017年11月10日 09:45:43 作者：mr_tangshuai
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)電腦和手機(jī)版樣式切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(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>首頁</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';//左浮動
//移除指定的屬性
lis[i].style.removeProperty('clear');
lis[i].style.width='150px';
}else{
//手機(jī)版
lis[i].style.clear = 'both';//清除浮動
lis[i].style.width='100%';
}
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
TypeScript中正確使用interface和type的方法實例
在ts中定義類型由兩種方式:接口(interface)和類型別名(type alias),interface只能定義對象類型,下面這篇文章主要給大家介紹了關(guān)于TypeScript中正確使用interface和type的相關(guān)資料,需要的朋友可以參考下2021-09-09
微信小程序開發(fā)打開另一個小程序的實現(xiàn)方法
這篇文章主要介紹了微信小程序開發(fā)打開另一個小程序的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
localStorage設(shè)置有效期和過期時間的簡單方法
眾所周知前端三大緩存,cookie,sessionStorage,localStorage,下面這篇文章主要給大家介紹了關(guān)于localStorage設(shè)置有效期和過期時間的相關(guān)資料,需要的朋友可以參考下2022-02-02
JavaScript ES6中const、let與var的對比詳解
這篇文章主要給大家介紹了在JavaScript中const、let與var對比的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起看看吧。2017-06-06
javascript 取小數(shù)點后幾位幾種方法總結(jié)
這篇文章主要介紹了javascript 取小數(shù)點后幾位幾種方法總結(jié)的相關(guān)資料,這里提供了四種方法，幫助大家整理，需要的朋友可以參考下2017-08-08
JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別
js中一般使用tofixed與round處理數(shù)據(jù)四舍五入，那么tofixed與round有什么區(qū)別呢？下面小編給大家分享JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別，需要的朋友參考下吧2017-10-10
JS+CSS實現(xiàn)六級網(wǎng)站導(dǎo)航主菜單效果
這篇文章主要介紹了JS+CSS實現(xiàn)六級網(wǎng)站導(dǎo)航主菜單效果,涉及JavaScript遍歷頁面元素及動態(tài)修改css屬性的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
本文給大家詳細(xì)匯總了一下javascript中的數(shù)組方法，十分的全面細(xì)致，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了JavaScript插件化開發(fā)教程，十分的詳細(xì)，2015-01-01
這篇文章主要為大家詳細(xì)介紹了如何利用threejs實現(xiàn)一個簡易的泊車功能,文中的示例代碼講解詳細(xì),對大家的學(xué)習(xí)和工作有一定的幫助,感興趣的小伙伴可以動手嘗試一下2024-01-01