Код javascript для изменения настроек клипа

Question

То, что я пытаюсь выполнить, - это когда размер окна изменяется, и размытое изображение также изменяется. По какой-то причине код не работает. Может кто-то определить, что не так, и что мне нужно сделать, чтобы исправить код. Благодарю.

• CSS -

/* ------- РАЗМЫТОСТЬ ЗА СООБЩЕНИЕ контейнеродержатель НАСТРОЙКИ ------- */

img.clipphoto { 
    /*--- CLIP SETTINGS: top, right, bottom, left ---*/ 
    clip: rect(18px,770px,600px,240px); 

    position: absolute; 
     -webkit-filter: blur(10px); 
     -moz-filter: blur(10px); 
     -o-filter: blur(10px); 
     -ms-filter: blur(10px); 
     filter: blur(10px); 

    } 

• JS -

  window.addEventListener('resize', function(event){ 
  var vInnerHeight= window.innerHeight; 
  
  var t = "18"; 
  var r = "770"; 
  var b = vInnerHeight-140; 
  var l = "240"; 
  
  var clipString = "rect(" + t + "px " + r + "px " + b + "px " + l + "px)"; 
  
  document.getElementByClassName(clipphoto).style.clip = clipString; 
  

• HTML -

  <!-- blurred photo of pix --> 
      <img src="images/image1.png" width="1200" height="620" alt="" class="clipphoto"> 
  

Answer 1

Там нет getElementByClassName() функции. Это getElementsByClassName() (множественное число).

И вы хотите, чтобы строка "clipphoto", а не (несуществующий) переменная с именем clipphoto:

var clipString = "rect(" + t + "px, " + r + "px, " + b + "px, " + l + "px)"; 
document.getElementsByClassName('clipphoto')[0].style.clip = clipString; 

Answer 2

Believe значения должны быть разделены запятой, не разделенных пробелами

var clipString = "rect(" + t + "px," + r + "px," + b + "px," + l + "px)"; 

document.getElementsByClassName('clipphoto')[0].style.clip = clipString; 

Редактирование: встроенный урок доступа к классу Пола Руба тоже