Я работал над страницей, и я хотел бы программно установить свойства CSS на слайд-шоу на обложке в зависимости от того, сколько экранной недвижимости есть. Если страница меньше одного номера границы, я не хочу активировать слайд-шоу. Если страница имеет ширину больше, чем этот номер границы, но меньше, чем другой порог, я хочу, чтобы слайд-шоу уменьшалось и уменьшалось больше для меньших размеров. Наконец, если он больше, чем оба, я хотел бы горизонтально центрировать слайд-шоу в его логическом контейнере.Как я могу получить jQuery.css(), чтобы превзойти таблицу стилей?
Источник в http://JonathansCorner.com/blacksmiths-forge/experimental.html имеет:
<iframe id="slideshow" border="0" frameborder="0" frameborder="no"
style="display: none;" width="318" height="424" src="/book_covers.cgi?width=318" />
CSS-на http://JonathansCorner.com/css/combined.css имеет:
#slideshow
{
height: 424px;
position: fixed;
top: 240px;
right: 190px;
width: 318px;
}
И на JavaScript, на http://JonathansCorner.com/js/combined.js:
if (jQuery(window).width() > 1200)
{
if (jQuery(window).width() > 1300)
{
var width = min(jQuery(window).width() - 1200, 318);
document.getElementById('slideshow').src = "/book_covers.cgi?width=" + width;
document.getElementById('slideshow').width = width + 'px';
document.getElementById('slideshow').width = width;
jQuery('#slideshow').css('right', jQuery(window).width() - 1200 - 318);
jQuery('#slideshow').css('display', 'block');
}
}
Ментальная модель я вошел с тем, что jQuery.css() будет козырем, а в перм которые я пробовал до сих пор, я никогда не знал, что с jQuery.css произошли изменения.
Я также пробовал использовать, например, jQuery('#slideshow').css('display', 'block !important').
Можно ли каким-либо образом использовать jQuery (или только JavaScript) для установки свойств таким образом, чтобы они были сохранены?
(Что случилось с моим начальным пониманием, и что есть истина о том, что может и не может быть сделана с программной настройкой стилей узлов DOM и свойств?)
jQuery '.css()' метод устанавливает стили inline на элементе. встроенные стили имеют более высокий приоритет, чем что-либо в таблице стилей. Поэтому '.css()' должен пересказывать ваши таблицы стилей. Очевидный вывод здесь заключается в том, что javascript-код фактически не работает. Вы пытались использовать 'console.log()' или точку останова в отладчике Dev Tools для отслеживания кода при его запуске? – Spudley
@Spudley true, за исключением случая, когда правило стиля имеет '! Important' (что является хорошим аргументом, чтобы не использовать его) – steveax