【凡哥教程第二十五讲作业之一】移入移出变色（JS操作CSS属性和HTML属性）

花简静

凡哥教程第二十五讲作业一：

有一个元素，部分代码如下所示，它已经拥有CSS样式，但我们还希望在交互时它能动态地产生一些变化，具体是，设备指针（pointer）移入元素界面时前景色是红色、背景色是浅绿色，移出时前景色是黑色、背景色是浅蓝色。

CSS+HTML代码如下，JS部分是作业内容。

提示：

① 设备指针和鼠标指针很相似，兼容鼠标指针，onpointerover 监听事件、onpointerout 监听事件和 onmouseover、onmouseout使用方法一样，作业请使用 pointer 相关监听事件完成；

② 指针移入 onpointerover 和 指针移出各自操作 元素.style.* 属性以改变元素的前景色和背景色，可以考虑 元素.style.CSS属性 或 元素.style.cssText 完成，如果使用cssText，因为元素已有CSS属性，建议使用 += 符号给元素赋值，它表示在原基础上再加这个（些）属性和属性值。

移入 背景绿 前景红
移出 背景蓝 前景黑

花简静

<style> #qsfg25 {     width: 600px;     height: 200px;     font-size: 2rem;     color:Magenta;     text-shadow: 1px 1px 2px gray;     background: lightblue;     border: 2px solid gray;     padding: 10px; } </style>   <div id="qsfg25">移入 背景绿 前景红 <BR>移出 背景蓝 前景黑</div>   <script> qsfg25.onpointerover = () =>{ qsfg25.style.cssText += 'color: red;font-size: 3rem;background: LightGreen'; }; qsfg25.onpointerout = () => {     qsfg25.style.background = 'LightSkyBlue'; qsfg25.style.color ='black'; }; </script>  

花简静

@凡哥
白老师先瞧一瞧今天的这个JS作业，是不是符合要求。
顺便把字体变大了一丢丢。

花简静

前景色当是上方的字体颜色处理，背景色还是背景色

令狐冲

静静这么辛苦
我很心疼。。。

花简静

令狐冲 发表于 2024-8-25 15:38
静静这么辛苦
我很心疼。。。

令帅你错了。。
作业是乐趣，怎么会辛苦~~

凡哥

花简静 发表于 2024-8-25 13:41 本帖最后由 花简静 于 2024-8-25 17:24 编辑 .mum { position: relative; margin: 0; padding: 10px; fon ...

效果没问题。代码的书写可以规范一下：

qsfg25.onpointerover = () => {
    qsfg25.style.cssText +=  'color: red;font-size: 3rem;background: LightGreen';
};

qsfg25.onpointerout = () => {
    qsfg25.style.background = 'LightSkyBlue'; 
    qsfg25.style.color ='black';
};

凡哥

收尾的花括号独立一样，习惯上，函数或事件结束了用分号结尾

花简静

凡哥 发表于 2024-8-25 18:23
本帖最后由 凡哥 于 2024-8-25 18:25 编辑

效果没问题。代码的书写可以规范一下：

天哪，原来大括号后面也要有一个分号结束。。这个我还真从未留意。
这个必须记住了。。

花简静

凡哥 发表于 2024-8-25 18:24
收尾的花括号独立一样，习惯上，函数或事件结束了用分号结尾

以后看老师贴子或者自己做贴的时候多留意这一块。