Как переключить обратное действие с помощью события onclick - PullRequest
Новая
       20

Как переключить обратное действие с помощью события onclick

0 голосов
/ 14 апреля 2020

Я пытаюсь изменить подгонку объекта видео-тега от содержимого к заполнению, что работает нормально, но я хочу сделать обратное средство, когда пользователь снова нажимает ту же кнопку, тогда он изменит свойство с заполнения на содержание. 

<a href="#" onclick="changeStyle()"><i class="fa fa-play-circle"></i></a>

<video controls poster="source-to-thumb.jpg" id="player" style="object-fit:contain;">
    <source src="source-to-file.mp4" type="video/mp4"/>
</video>

<script>
var video = document.getElementsByTagName('video')[0];
function changeStyle() {
  if(video.style.objectfit === 'fill') {
    video.style.objectFit = 'contain';
  } else {
    video.style.objectFit = 'fill'
  }
}
</script>

Любое предложение будет оценено, спасибо.

1 Ответ

0 голосов
/ 14 апреля 2020

Вместо использования встроенных стилей (которых всегда следует избегать, когда это возможно), используйте CSS классы. Затем вы можете просто переключить использование класса.

Также, смотрите мои комментарии HTML, CSS и JavaScript о том, как исправить некоторые проблемы с другим кодом. В частности, избегайте методов, которые возвращают «живой» список узлов, например getElementsByTagName(). 

// Don't scan the whole document for all the matching
// elements when you know that there will only be one.
// Use getElementById() if there is an id.
var video = document.getElementById('player');

// Set up events in JavaScript, not HTML
document.querySelector("i.fa-play-circle").addEventListener("click", function(){
  // Just toggle the use of the other class:
  video.classList.toggle("fill");
});
/* Use CSS classes when possible */

i.fa-play-circle { cursor:pointer; }

/* This will be applied to the video by default */
video {
  object-fit:contain;
  border:1px solid black;
  height:150px;
  width:300px;
}

/* This class will be toggled on and off when the icon is clicked. 
   When it gets toggled on, the new object-fill value will override
   the previous one. When it gets toggled off, the previous style 
   will be restored. */
.fill {
  object-fit:fill;
}
<!-- Don't use hyperlinks just as a JavaScript hook.
     Hyperlinks are for navigation and using them for
     other purposes can cause problems for those using 
     screen readers.
     
     Any visible element supports a click event. Here,
     you can just set up the click event on the <i> element
     that people will be clicking on in the first place.
     
     Also, don't use inline HTML event attributes.
     Instead, separate your JavaScript into a script element.
-->
<i class="fa fa-play-circle">Hit play and then click Me several times</i><br>

<video controls poster="source-to-thumb.jpg" id="player">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"/>
</video>
...