Блог

Главная - Вопросы по программированию - Выбор внешнего CSS-файла с помощью JS

Выбор внешнего CSS-файла с помощью JS

#javascript #html #css #browser-feature-detection

#javascript #HTML #css #браузер-обнаружение функций

Вопрос:

Я хочу выбрать файл CSS, используя переменную из фрагмента JS. Я работаю над обнаружением функций для выбора определенного CSS. Вот код, который я использую для определения разрешения экрана. Я хотел бы использовать либо «RES», либо «device» для выбора внешнего CSS. Спасибо. 

 function hasTouch() {
  return Modernizr.touch;
}

var RES = window.screen.availWidth

function detectDevice() {
  if (hasTouch()) {
    if (RES < 600) {
      device = 'phone';
    } else {
      device = 'tablet';
    }
  } 
  if (RES > 600 amp;amp; RES < 1025) {
    device = 'Medium';
  }
  if (RES > 1025 amp;amp; RES < 1367) {
    device = 'Large';
  }
  if (RES > 1367) {
    device = 'XL';
  }
  return device;
}

document.querySelector('#device').innerHTML = detectDevice();

Комментарии:

1. Вам следует изучить возможность использования медиазапросов CSS , которые можно легко выбирать в зависимости от ширины. Touch or not сейчас немного менее стандартизирован, но вы можете найти способ.

2. (a) материал, основанный на разрешении, намного лучше выполняется с помощью медиазапросов CSS. Они предназначены явно для этого. (b) Обнаружение устройств на основе касания является рискованным — у меня ноутбук с сенсорным экраном, и мне бы не хотелось, чтобы на этом экране отображался мобильный вид.

3. Надеюсь, у вас есть код для изменения размера

4. @Huangism … кстати, о том, что автоматически обрабатывается медиа-запросами. 🙂

5. Запросы CSS media, этот метод сделает его занозой в заднице, учитывая типы существующих устройств. iPhone против Surface….

Ответ №1:

Используйте mediaQueries, вам даже не понадобится Javascript.

http://jsfiddle.net/D6hZn/3/

HTML

 <div id="device"></div>

CSS

 #device:before {
    content: "phone";
}

@media (min-width: 600px) {
    #device:before {
        content: "Medium";
    }

}

@media (min-width: 1025px) {
    #device:before {
        content: "Large";
    }    
}

@media (min-width: 1367px) {
    #device:before {
        content: "XL";
    }    
}

Что касается touch, я бы хотел, чтобы вы могли использовать mediaQueries для этого, но это невозможно (пока). Используйте Modernizr

CSS

 html.touch #device:after {
    content: " touch";
}

html.no-touch #device:after {
    content: " no-touch";
}