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

金元宝kkk 2018-03-05 05:34:28

web小白，请教大神如何用Javascript来实现鼠标双击选中页面中的英文单词并改变其颜色的功能！

...全文

802 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

enl0ve 2018-03-05

打赏
举报

可以用伪类实现

无聊的上午 2018-03-05

打赏
举报

引用 1 楼 usecf 的回复:

<html> <head> <script type="text/javascript"> function dbEvent() { document.getElementById("firstP").style.color="#ff0000"; } </script> </head> <body> <p id="firstP" ondblclick="dbEvent()"><span>aadfasdfsadfa</p></span> <p>dffdddddd</p> </body> </html>

你这个开闭标签写的也是牛逼而且你不觉得你这样非常麻烦么？

<html>
<head>

</head>
<body>
1111111111111
</body>
<script type="text/javascript">
    document.getElementsByTagName("body")[0].onclick = function(){
        this.style.color = "red";
    }
</script>
</html>

无聊的上午 2018-03-05

打赏
举报

引用 2 楼 zzgzzg00 的回复:


<style>
        ::selection{
            color: red;
        }
    </style>

这个安逸，我没想到css上面去

似梦飞花 2018-03-05

打赏
举报


<style>
        ::selection{
            color: red;
        }
    </style>

usecf 2018-03-05

打赏
举报

<html> <head> <script type="text/javascript"> function dbEvent() { document.getElementById("firstP").style.color="#ff0000"; } </script> </head> <body> <p id="firstP" ondblclick="dbEvent()"><span>aadfasdfsadfa</p></span> <p>dffdddddd</p> </body> </html>

qq_35269473 2018-03-05

打赏
举报

引用 2 楼 zzgzzg00 的回复:


<style>
        ::selection{
            color: red;
        }
    </style>

这个太方便了，谢谢

斯洛文尼亚旅游 2018-03-05

打赏
举报

引用 6 楼 weixin_38841441 的回复:

想再请教一下，首先我想要的功能是是需要按空格将每个英文单词分割开来的，比如我的body标签里有”hello world“，那我点击hello的时候，是只有hello变红，world应该不变色。另外我希望单词变色之后颜色就一直是红色，不会再变回去了，这个好像光用CSS就实现不了了，因为后续是要将选中的单词加入数据库的，谢谢！

不变回去得按照1#的增加标签。而且你点是几个意思。。点击获取不到点击的内容，你要选择内容可以通过range对象来实现

Web开发学习资料推荐
javascript解码读取二维码信息
javascript客户端图片预览

金元宝kkk 2018-03-05

打赏
举报

想再请教一下，首先我想要的功能是是需要按空格将每个英文单词分割开来的，比如我的body标签里有”hello world“，那我点击hello的时候，是只有hello变红，world应该不变色。另外我希望单词变色之后颜色就一直是红色，不会再变回去了，这个好像光用CSS就实现不了了，因为后续是要将选中的单词加入数据库的，谢谢！