Question

我已经开始制作模糊图像，因此当您单击“模糊图像”按钮时，它将模糊图像，但是Console.Log上显示了一些错误，我一直在尝试解决它，但没有成功。

let btn = document.querySelector('.btnbl')[0];
let img = document.querySelector('img')[0];
c = 0;

function coverImage () {
    if( c === 0) {
        btn.innerHTML = 'Blur Image';
        img.style.filter = 'blur(0)';
        c = 1;
    } else {
        btn.innerHTML = 'Unblur Image';
        img.style.filter = 'blur(24px)';
        c = 0;
    }
}

.blur{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.blur img{
    width: 730px;
    height: 520px;
    filter: blur(0px);
}
.btnbl{
    position: absolute;
    top: 45px;
    right: 452px;
    padding: 7px;
    background-color: darkslategray;
    border-radius: 5px solid yellow;
    font-size: 20px;
    color: white;
    cursor: pointer;
    font-family: sans-serif;
}

<div class="blur">
    <img src="https://4.bp.blogspot.com/_EZ16vWYvHHg/TFBW_zN6oaI/AAAAAAAAQd4/8UxrcXLQ5js/s1600/www.idool.net-Perrito.jpg">
    <button onclick="coverImage()" class="btnbl">Blur Image</button>
</div>

Answer 1

document.querySelector返回单个元素，因此无需访问元素，就像使用[]返回数组一样。并在调用函数之前先创建c=1，因为它最初是不模糊的

let btn = document.querySelector('.btnbl');
let img = document.querySelector('img');
c = 1;

function coverImage () {
    if( c === 0) {
        btn.innerHTML = 'Blur Image';
        img.style.filter = 'blur(0)';
        c = 1;
    } else {
        btn.innerHTML = 'Unblur Image';
        img.style.filter = 'blur(24px)';
        c = 0;
    }
}

.blur{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.blur img{
  width: 730px;
  height: 520px;
  filter: blur(0px);
}
.btnbl{
  position: absolute;
  top: 45px;
  right: 452px;
  padding: 7px;
  background-color: darkslategray;
  border-radius: 5px solid yellow;
  font-size: 20px;
  color: white;
  cursor: pointer;
  font-family: sans-serif;
}

<div class="blur">
           <img src="https://4.bp.blogspot.com/_EZ16vWYvHHg/TFBW_zN6oaI/AAAAAAAAQd4/8UxrcXLQ5js/s1600/www.idool.net-Perrito.jpg">
           <button onclick="coverImage()" class="btnbl">Blur Image</button>
         </div>

Answer 2

querySelector（）仅返回一个元素，因此无需将其作为数组引用。

Answer 3

只需要像这样取出变量的索引：

让btn = document.querySelector（'。btnbl'）; let img = document.querySelector（'img'）;

        <View style={styles.container}>
            <View style={styles.separator}>
                <TouchableHighlight
                    underlayColor="rgba(255, 255, 255, 0)"
                    onPress={this.cardClick}
                    onLongPress={this.cardLongPress}
                    onPressOut={this.cardPressOut}
                >
                 {this.content}
                </TouchableHighlight>
          </View>
        </View>

let btn = document.querySelector('.btnbl');
let img = document.querySelector('img');
c = 0;

function coverImage () {
    if( c === 0) {
        btn.innerHTML = 'Blur Image';
        img.style.filter = 'blur(0)';
        c = 1;
    } else {
        btn.innerHTML = 'Unblur Image';
        img.style.filter = 'blur(24px)';
        c = 0;
    }
}

.blur{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.blur img{
  width: 730px;
  height: 520px;
  filter: blur(0px);
}
.btnbl{
  position: absolute;
  top: 45px;
  right: 452px;
  padding: 7px;
  background-color: darkslategray;
  border-radius: 5px solid yellow;
  font-size: 20px;
  color: white;
  cursor: pointer;
  font-family: sans-serif;
}

模糊图像JavaScript

3 个答案: