@media handheld
- устаревший параметр, который более не используется. Сейчас нужно проверять физические размеры. Вот гайдлайн: https://css-tricks.com/snippets/css/media-queries-... <select id="test">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Новая цена: <span id="price">1</span>
var $select = $('#test'); // сохраняем в переменную ссылку на селект
var $price = $('#price'); // сохраняем в переменную ссылку на блок с ценой
// на селект навешиваем слушатель, который следит за изменениями
$select.on('change', function () {
var value = $(this).prop('value'); // если что-то изменилось, получаем value селекта
$price.html(value); // ставим этот value в поле с ценой
});
.theme_1 .header {background: #000;}
.theme_1 .button {background: #000;}
.theme_1 .link {color: #000;}
.theme_2 .header {background: #f00;}
.theme_2 .button {background: #f00;}
.theme_2 .link {color: #f00;}
<html class='theme_1'>
...
</html>
<button class='js-switch-theme' data-name='theme_2'>Swich to theme 2</button>
$(document).on('click', '.js-switch-theme', function () {
var theme = $(this).data('name'),
$html = $('html');
$html.removeClass();
$html.addClass(theme);
});
.test {
position: relative;
width: 300px;
height: 100px;
box-sizing: border-box;
border: 1px solid #000;
}
.test:before {
position: absolute;
display: block;
content: '';
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 1px dotted #900;
}