代码之家 › 专栏 › 技术社区 › nonopolarity

除了文本区域和输入文本元素,我可以使用javascript突出显示任何文本吗?

javascript

nonopolarity · 技术社区 · 15 年前

使用javascript,很容易通过编程选择文本区域或输入文本元素内的文本。怎么样

<span>The quick brown fox jumps over the lazy dog</span>

是否可以使用javascript来选择“快速棕色狐狸”这个词?还是选择整个句子?

4 回复 | 直到 15 年前

Flavius Stef 15 年前

礼节 http://www.sitepoint.com/forums/showthread.php?t=459934

<script type="text/javascript">
    function fnSelect(objId) {
        fnDeSelect();
        if (document.selection) {
        var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(objId));
        range.select();
        }
        else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(objId));
        window.getSelection().addRange(range);
        }
    }

    function fnDeSelect() {
        if (document.selection) document.selection.empty(); 
        else if (window.getSelection)
                window.getSelection().removeAllRanges();
    }
    </script>
<body>

<div id="test1">
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
</div>
<div id="test2">
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
</div>
<a href="javascript:fnSelect('test1');">Select 1</a>
<a href="javascript:fnSelect('test2');">Select 2</a>
<a href="javascript:fnDeSelect();">DeSelect</a>
</body>

jjnguy Julien Chastang 15 年前

你需要某种方法来操纵 span 标签。比如一个 id ,但在javascript中,我将编辑 style 性质。您可以为所有要突出显示的内容设置一个属性,如下所示。

.HL {
    background: #ffff99; 
    color: #000000;
}

如果您这样做,那么您将需要获得对特定标签的引用。

DocumentgetElementsByTagName("title")

否则 Document.getElementByID("ID") 适用于唯一ID。然后使用 setAttribute(name, value) 将类更改为给定的类。

这只是一个简单的例子,但有很多方法可以做到这一点。

<span id="abc" class=""> Sample </span>
var temp = Document.getelementByID("abc");
temp.setAttribute('class', 'HL');

Matthew Vines 15 年前

在CSS中,您可以创建一个.highlight类

.highlight{
  background-color:yellow;
}

在javascript中,可以将.highlight类添加到要突出显示的元素中。

<getSpanElement>.className='highlight';

然后突出显示此文本,尽管未选中。

Marius Burz 15 年前

突出显示还是选择?我认为你其实想选择不突出显示。

突出。。。对!设置 span 元素,例如前景色和背景色。

编辑:这叫做选择。对不起,我不知道怎么做。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前