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()（复数）。

你想要字符串＆＃34; clipphoto＆＃34;而不是名为clipphoto的（不存在的）变量：

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

Answer 2

相信值应以逗号分隔，而不是空格分隔

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

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

编辑：由Paul Roub编写的类访问者错误

javascript代码更改剪辑rect设置

2 个答案: