有好几个疑问

来源：3-11 自由编程

Aurora_Meteor

2020-05-12 21:23:46

1、我看老师在回答里说要用js？题目说滑过的时候宽度变为$num1+$num2，而且刚学了运算，不应该是使用scss的加法吗？使用js的话不就只能直接写入宽度值了？

我使用this.offsetWidth和this,offsetHeight来设置怎么打印结果是undefined呢？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<div></div>

<script>
    let div = document.querySelector('div');
    div.addEventListener('mouseover', () => {
        this.offsetWidth = this.offsetWidth + this.offsetHeight;
    });
</script>

<body>

</body>

</html>

$num1: 200px;
$num2: 100px;
$color: red;
div {
    width: $num1;
    height: $num2;
    background-color: $color;
}

2、我把$num1、$num2、$color都定义在一个mixin里面，然后引入到div里面是有，可是引入以后说它们没有被定义，mixin里面只能直接写原生的css样式吗？不能写变量？

写回答

2回答

好帮手慕粉

2020-05-13

已采纳

同学你好，关于同学的问题回答如下：

1、代码实现的方式有很多种，没有标准答案的，可以使用js实现，也可以不使用的。不使用js实现如下：

2、这里的this指向的是window，我们可以先打印出来看下：

因为在不使用箭头函数时，通过addEventListener添加事件，里面的this本身就指向的是事件调用者，同学再添加个箭头函数，就会指向调用者的父级，也就是window。我们可以再使用普通函数打印下：

所以同学在添加事件时，不用使用箭头函数,，这也是为什么会输出undefined。

3、因为offsetWidth是只读属性，所以不能给元素设置宽度。

4、@mixin里面是可以放变量的，如下：

祝学习愉快~

hurora_Meteor

h 1、offsetWidth是只读属性，那么使用js设置宽度的时候应该怎么写呢？我把箭头函数改为function以后： div.addEventListener('mouseover', function() { this.style.width = this.offsetWidth + this.offsetHeight; }); 还是没有效果。 2、我说的mixin是在变量定义在mixin里面，然后在引入的地方使用变量，不是在mixin里面使用变量，如下： @mixin he { $num1: 100px; $num2: 200px; } div { @include he(); width: $num1; height: $num2; } 报存后报错： Error: Undefined variable: "$num1". on line 8 of sass/f:\demo\css\index.scss >> width: $num1; -----------^

h020-05-13

共1条回复

好帮手慕粉

2020-05-13

同学你好，关于同学的问题回答如下：

1、同学没有设置单位：