Почему не работают css свойства в jQuery?

Question

[lemonlimelike]

var elem = document.getElementById("#video");
  if (elem.requestFullscreen) {
    $('#video_panel').css('display','none');
  } else if (elem.mozRequestFullScreen) {
    // elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    // elem.webkitRequestFullscreen();
  }

Почему не работают эти свойства? уже все перепробовал и переменную создавал, прописывал в ней свойства, затем ее помещал в код и не работало, почему?

И так ставил

var elem = document.getElementById("video");
 $(document).ready(function(){
	if (elem.requestFullscreen) {
		$('.panel').css('width', '1000px');
	} else if (elem.mozRequestFullScreen) {
	  // elem.mozRequestFullScreen();
	} else if (elem.webkitRequestFullscreen) {
	  // elem.webkitRequestFullscreen();
	}
 });

И так

$(document).ready(function(){
var elem = document.getElementById("video");
	if (elem.requestFullscreen) {
		$('.panel').css('width', '1000px');
	} else if (elem.mozRequestFullScreen) {
	  // elem.mozRequestFullScreen();
	} else if (elem.webkitRequestFullscreen) {
	  // elem.webkitRequestFullscreen();
	}
 });

И все равно не работают, почему?

Answer 1

[Иван Вишневский]

Это тонкий намёк на то, что в 2017 пора бы уже отказаться от jQuery. :)

Comments

[lemonlimelike]

В смысле... Почему? И чем его заменять?

[Ярослав Иванов]

lemonlimelike: зачем задавать еще раз подобный вопрос ?

[Иван Вишневский]

lemonlimelike: потому что jQuery - это костыль. Нужно писать на javascript, а не на jQuery. Ваша задача решается в пару строк чистого JS. Ну а если совсем серьёзно, то через js никогда не стоит присваивать css-свойства(если можно сделать иначе). Здесь вам нужно присваивать класс с определёнными свойствами через js, а не сами свойства.

P.S та же операция селекта по id на jQuery работает в несколько раз медленнее старого доброго document.getElementById. Присваивание классов теперь элементарное с classList API. Смысла в jQuery осталось примерно 0.

[lemonlimelike]

Ярослав Иванов: Я его изменил

[lemonlimelike]

Иван Астапов:

Здесь вам нужно присваивать класс с определёнными свойствами через js, а не сами свойства.

То есть создать переменную и в ней прописать свойства и затем ее запихнуть в код? правильно вас понял? если да то как ее запихнуть в код на чистом js на jQuery знаю, а на js нет

[Иван Вишневский]

lemonlimelike: не работает скрипт не из-за селектора...

const elem = document.getElementById("video");
const panel = document.getElementById('video_panel');
if (elem.requestFullscreen) panel.style.display = "none";
else if (elem.mozRequestFullscreen) {/* do smth */}
else if (elem.webkitRequestFullscreen {/* do smth */}

[Иван Вишневский]

lemonlimelike: Нет. Вот смотрите. Вам нужно убрать какой-то блок. Для этого вы делаете следующее:

const block = document.getElementById('block');
block.classList.add('block--hidden');

И в css у вас:

.block{
display: block;
}
.block--hidden{
display: none;
}

[lemonlimelike]

Иван Астапов: Первый ваш пример, вставил вместо моего, и не работает все равно.

[lemonlimelike]

lemonlimelike: Там скобочка не была поставлена, если что