猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

请教Javascript如何实现双击选中页面中英文单词并将其颜色改变的功能

  • 请教一下，如何用Javascript实现双击选中页面中英文单词并将其颜色改变的功能。
    首先我想要的功能是是需要按空格将每个英文单词分割开来的，比如我的body标签里有”hello world“，那我点击hello的时候，是只有hello变红，world应该不变色。另外我希望单词变色之后颜色就会一直保持为改变后的颜色，而不是暂时性的，因为后续还需要将选中的单词加入数据库，谢谢！


哔哔one
浏览 1131回答 2
2回答

慕田峪9158850

&nbsp;<!DOCTYPE&nbsp;html> <html> &nbsp;&nbsp;&nbsp;&nbsp;<head> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="utf-8"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<title></title> &nbsp;&nbsp;&nbsp;&nbsp;</head> &nbsp;&nbsp;&nbsp;&nbsp;<body> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;id="word1"&nbsp;onclick="c1()">hello</span>&nbsp;<span&nbsp;id="word2"&nbsp;onclick="c2()">world</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;c1(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;w1&nbsp;=document.getElementById("word1"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w1.style.color="red"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;c2(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;w2&nbsp;=document.getElementById("word2"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w2.style.color="blue"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</script> &nbsp;&nbsp;&nbsp;&nbsp;</body> </html>会用jquery的话可以进行相应的改动，可以不用id来控制
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript