Cet article présente principalement JavaScript pour implémenter en détail la commutation de style entre les versions ordinateur et mobile. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
<!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>产品介绍</li> <li>成功案例</li> <li>合作伙伴</li> </ul> <p> <button onclick="addStyle()">添加样式效果</button> <button onclick="showStyle('pc')">电脑版</button> <button onclick="showStyle('mobile')">手机版</button> </p> <script> function addStyle() { //根据元素的标记名获取元素 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{ //手机版 lis[i].style.clear = 'both';//清除浮动 lis[i].style.width='100%'; } } } </script> </body> </html>
Recommandations associées :
Les dernières questions et solutions d'entretien avec les programmeurs Javascript
JavaScript et jQuery implémentent le chargement automatique
JavaScript écrit du code maintenable
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!