Изменить CSS, применяемый к пунктам меню навигации, используя Javascript

У меня есть 4 ссылки на страницы в моей навигационной панели. Я хочу изменить их размер при использовании мобильных браузеров.Изменить CSS, применяемый к пунктам меню навигации, используя Javascript

Это мой JS обнаружить мобильный телефон: функция detectmob() {

if(navigator.userAgent.match(/Android/i) 
|| navigator.userAgent.match(/webOS/i) 
|| navigator.userAgent.match(/iPhone/i) 
|| navigator.userAgent.match(/iPad/i) 
|| navigator.userAgent.match(/iPod/i) 
|| navigator.userAgent.match(/BlackBerry/i) 
|| navigator.userAgent.match(/Windows Phone/i) 
){ 
    alert('This be a mobile browser'); 
    style3(); //a function which applies other CSS changes to my page 
    //Trying to figure out how I'd change the width of my a elements within my nav to 100% width 

    } 
}

CSS:

#topnav ul li a { 
    width: 175px; //I'd like to change this to 100% using JS based on above condition 
    height: 40px; 
    line-height: 53px; 
    border-bottom: 4px solid #636393; 
    padding:0px; 
    color: #fff; 
    font-size:18px; 
    font-weight:lighter; 
    text-align:center; 
    text-decoration: none; 
    display: block; 
    -webkit-transition: .1s all linear; 
    -moz-transition: .1s all linear; 
    transition: .1s all linear; 
}

HTML:

<nav id="topnav"> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="video.html">Trailers</a></li> 
     <li id='adminPage'><a href="admin.html">Admin</a></li> 
    </ul> 
</nav>

Это то, что я пытался внутри detectmob() если true:

navItems = document.getElementsByTagName ('a');

for(var i =0; i < navItems.length;++1){ 
navItems[1].style.width = "100%"; 
    }

, но я получил ошибку: неперехваченный ReferenceError: Invalid стороны выражения левой в операции приставки

источник

2013-04-03 Batman

ahhh! Обнаружение браузера = плохое. Используйте обнаружение функции. – War10ck

Разве это не считается обнаружением платформы? Меня не волнует браузер. Я просто хочу внести определенные изменения, если это не рабочий стол/ноутбук – Batman

@Batman, вы действительно этого не делаете. Представьте, что вы заходите в ресторан, и вы видите, что другой заказчик - стейк. Вы также решили заказать стейк. Когда стейк приходит, у другого клиента есть картофельное пюре на стороне и соус А1, твой, но это всего лишь стейк без каких-либо дополнительных услуг. Когда вы спрашиваете официанта, почему, он отвечает, что это потому, что вы вошли с боковой двери, а не на входную дверь. Хотя этот пример немного экстремален, именно разработчики делают это, когда они пытаются изменить реакцию веб-сайта на основе используемого пользователем устройства. – zzzzBov

Вы просто должны использовать медиа-запросы прямо в CSS для корректировки на основе размера окна браузера. Например, следующий CSS будет использоваться, если браузер меньше 500 пикселей:

@media screen and (max-width : 500px) { 
    /* Styles for less than 500px */ 
}

источник

2013-04-03 17:30:02 dsundy

Моя проблема с медиа-запросами заключается в том, что я не хочу входить в игру угадывания с помощью разных устройств, разрешения экрана и многое другое. Я хочу решение, которое будет применяться ко всем мобильным устройствам. Плюс, так как у меня уже есть условие для вызова функции style3, я могу также сделать другие изменения css внутри этой одной функции и сохранить все в одном месте ..... или я совершенно не прав здесь? – Batman

Обнаружение браузера обычно рассматривается как плохая практика. Мне кажется, что это более увлекательная игра, чтобы попытаться обнаружить каждое мобильное устройство (настоящее и будущее)! Вы также можете столкнуться с проблемами с некоторыми устройствами, не поддерживающими JS. – dsundy

Хорошо, я попробую медиа-запросы, чем. Можете ли вы объяснить, что такое экран @media? Или все это говорит о применении этих стилей, если экран меньше 500 пикселей? – Batman

Использование медиа запросов позволяет определить стили в вашем CSS на основе устройства в настоящее время с помощью вашего сайта.

Я думаю, что медиа-запросы гораздо лучший способ для достижения реагирующей раскладки, которую вы ищете:

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

источник

2013-04-03 17:29:58 BentOnCoding

Вместо этого используйте медиа-запросы. CSS:

@media all and (max-width: 320px) { 

    #topnav ul li a { 
     width:100%; 
    } 

}

источник

2013-04-03 17:30:25 inorganik

Изменить CSS, применяемый к пунктам меню навигации, используя Javascript

ответ

Смежные вопросы