Javascript jQuery style.backgroundSize

0

Я использую следующий код для настройки backgroundSize элемента с именем remote:

document.getElementById('remote').style.backgroundSize = '80% 100%';

Тем не менее, я пытаюсь заставить его работать, используя следующий метод:

$("#remote").style.backgroundSize = '80% 100%';

Первый метод работает, но второй метод не работает.

Любые предложения, что я делаю неправильно?

благодаря

Теги:

4 ответа

2
Лучший ответ

Если вы хотите сделать это через jquery, попробуйте следующее.

$("#remote").css("background-size", "80% 100%");
  • 0
    бей меня к этому ... :-) +1
1

Что вы делаете неправильно, так это то, что $('#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" вашего кода, если он предлагает более простую структуру кода, а не только немного более короткий синтаксис.

0

попробуй это:

$("#remote").get(0).style.backgroundSize = '80% 100%';

$("#remote") // return jquery object
$("#remote").get(0) // return dom object
0

Попробуйте использовать это.

$("#remote").css("background-size":"80% 100%");
  • 0
    Я не удивлюсь, если это вызовет синтаксическую ошибку, так как оператор : не имеет смысла в этом контексте.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню