Question

我使用Angular2，我有一个div，我在显示几行文字。我在文本下方有一个按钮。当我点击它时，我希望div中的整个文本都显示为选中状态（就像当你手动选择带有蓝色背景的文本区域时发生的那样。这是我的div：

<div #ins class="xyz" innerHTML="{{ 'sometext' | translate }}"></div>

我可以创建一个背景色为＆＃39; blue＆＃39;并在单击按钮时应用于div，但这会使整个div变为蓝色。我想只显示背景为蓝色的文本部分（就像手动选择文本时那样）而不是整个div。我怎样才能做到这一点？

Answer 1

.class {
    display:inline;
    background-color:green;
    color:#fff;
}

<div class="class">Trump<br>Trump</div>

Answer 2

请获取以下代码。如果您想查看正在运行的示例，请转到plunker链接。Demo

@Component({  
   selector: 'my-app',
   template: `
    <div [ngClass]="{'yellowclass':selectedtext== true}">
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
    </div>
    <div (click)="selectedText()"> Click here</div>   `, 
}) 

export class App {  
       name:string;  
       constructor() {
            this.name = `Angular! v${VERSION.full}`
      } 
      selectedtext:boolean =false;
      selectedText(){
            if(this.selectedtext==false){
               this.selectedtext= true;
            }else{
               this.selectedtext= false;
            }
       } 
}

Answer 3

在你的html文件中试试这个

 <div #ins id="selectedTextId" class="xyz" innerHTML="{{ 'sometext lorem ipsum' }}"></div>
 <button (click)="selectText('selectedTextId')">select</button>

并在ts文件中添加此方法

 private selectText(selectedElemntId):void {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(selectedElemntId));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(selectedElemntId));
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
        }
    }

这应该有效，因为它会按预期选择特定文本

Answer 4

您好，您只需使用javascript HTML DOM属性即可。

function changeColor(){
	document.getElementById("paragraph").style.background = "blue";
}

<html>
<body>

<h1 id="paragraph">This is a Heading</h1>
<button onClick="changeColor()">ChangeColor</button>
</body>
</html>

希望这对你有用。快乐的编码：）

突出显示蓝色div的文本

4 个答案: