Я использую следующий код для настройки backgroundSize элемента с именем remote:
document.getElementById('remote').style.backgroundSize = '80% 100%';
Тем не менее, я пытаюсь заставить его работать, используя следующий метод:
$("#remote").style.backgroundSize = '80% 100%';
Первый метод работает, но второй метод не работает.
Любые предложения, что я делаю неправильно?
благодаря
Если вы хотите сделать это через jquery, попробуйте следующее.
$("#remote").css("background-size", "80% 100%");
Что вы делаете неправильно, так это то, что $('#remote')
не возвращает элемент DOM, например document.getElementById('remote')
, но вместо него является объект jQuery, который представляет собой коллекцию, содержащую элементы DOM, соответствующие селектору.
Поскольку оператор []
работает над этой коллекцией, как на простом массиве, вы можете вызвать $('#remote')[0]
чтобы получить первый элемент DOM в этой коллекции. Поскольку id
является уникальным идентификатором в DOM, вы можете быть уверены, что первый элемент будет тем, который вы хотите.
Вы также можете вызвать $('#remote').get(0)
который по существу делает то же самое.
Таким образом, вы можете либо вызвать $('#remote').get(0).style.backgroundSize = '80% 100%'
или $('#remote')[0].style.backgroundSize = '80% 100%'
, они дадут тот же результат.
jQuery также предлагает функцию для изменения свойств css всех элементов, соответствующих селектору с .css()
. Это, помимо предложения немного более короткого синтаксиса, довольно полезно в тех случаях, когда имеется более одного сопоставленного элемента (например, $('li').css('backgroundColor', 'black')
изменяет цвет фона каждого <li>
). В вашем случае вы можете использовать эту функцию, например $('#remote').css('backgroundSize', '80% 100%')
. Это немного (незаметно) медленнее. Кроме того, это не приводит к возникновению исключения в случае отсутствия соответствующих элементов, в то время как другие три (в том числе и оригинальные в вопросе) методы делают.
Таким образом, вы можете достичь этого с помощью любой из следующих строк:
$('#remote')[0].style.backgroundSize = '80% 100%'
$('#remote').get(0).style.backgroundSize = '80% 100%'
$('#remote').css('backgroundSize', '80% 100%')
И в качестве сноски я бы не изменил document.getElementById('remote').style.backgroundSize = '80% 100%'
если он уже работает для вас. Это стоит только "jQueryfying" вашего кода, если он предлагает более простую структуру кода, а не только немного более короткий синтаксис.
попробуй это:
$("#remote").get(0).style.backgroundSize = '80% 100%';
$("#remote") // return jquery object
$("#remote").get(0) // return dom object
Попробуйте использовать это.
$("#remote").css("background-size":"80% 100%");
:
не имеет смысла в этом контексте.